导航栏固定顶部位置。滚动时绝对更改为相对

Question

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

   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 属性设置动画，只需使用绝对定位并为 top 值设置动画即可。

Working Example

$(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);
    }
});