当滚动超过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");
}
});
这不起作用,为什么?
答案 0 :(得分:1)
您无法通过JQUERY API DOCS为css属性position
制作动画:
除非如下所述,否则应将所有动画属性设置为单个数值。 大多数非数字属性无法使用基本jQuery功能进行动画处理(例如,宽度,高度或左边可以设置动画,但背景颜色不能,除非jQuery.Color()插件是用过的)。除非另有说明,否则属性值被视为多个像素。可以在适用的情况下指定单位em和%。
答案 1 :(得分:0)
看看如何无法为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);
}
});