导航栏固定顶部位置，滚动时绝对位置相对于相对位置的变化

Question

当滚动超过600px时，我想将导航条固定的顶部位置从绝对位置更改为相对位置。我有这个代码：

   if (scroll >= 700) {
    $(".navbar-fixed-top").addClass("navbar-scroll");
  } else {
    $(".navbar-fixed-top").removeClass("navbar-scroll");
   }
});

这是可行的，但我试图将其更改为动画（用于过渡）

我做了这个：

 if (scroll >= 700) {
                $(".navbar-fixed-top").animate ({
        position: 'fixed'
        }, "slow"); 
} else {
                $(".navbar-fixed-top").animate ({
        position: 'absolute'
        }, "slow");
 }
});

这不起作用，为什么？

Answer 1

您不能从JQUERY API DOCS:动画化css属性position

除以下说明外，所有已设置动画的属性都应设置为单个数值大多数非数字属性都无法使用基本的jQuery功能设置动画（例如，宽度、高度或左侧可以设置动画，但背景颜色不能设置动画，除非使用jQuery.color（）插件）。除非另有规定，否则特性值将被视为像素数。在适用的情况下，可以指定单位em和%。

http://api.jquery.com/animate/

Answer 2

鉴于无法设置position属性的动画，只需使用绝对定位并设置顶部值的动画即可。

工作示例

$(window).scroll(function () {
    var scroll = $(window).scrollTop();
    if (scroll >= 700) {
        $(".navbar-fixed-top").animate({
            top: scroll + 10
        }, 50);
    } else {
        $(".navbar-fixed-top").animate({
            top: '10px'
        },50);
    }
});