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

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

您不能position从 JQUERY API DOCS 为 css 属性设置动画：

所有动画属性都应动画为单个数值，除非以下说明；大多数非数字属性无法使用基本的 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);
    }
});