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

<强> 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);
    }
});

Navbar固定顶部位置。滚动时对相对的绝对变化

2 个答案: