目标:当到达滚动条上的某个位置时,为导航栏提供不透明度。 到目前为止,它可以在加载时工作,但是当向上滚动时,不透明度不会返回到 0。
function navanim() {
var window_top = $(window).scrollTop();
var div_top = $('#news').offset().top;
if (window_top > 500)
$('.nav').animate({
'opacity': '1'
}, 500);
else
$('.nav').css("opacity", 0);
}
$(function() {
$(window).scroll(navanim);
navanim();
});
最佳答案
在尝试了您的代码之后,问题似乎可能与 animate、css 和可能的其他方法(在每次滚动时)调用过于频繁有关。
我根据你的想法重新实现了一个小例子:
上面的 jsfiddle 使用以下函数通过跟踪状态来检查是否需要动画,如果需要则执行该动画。
var navAnimation = (function() {
var news = $('#news'),
header = $('header'),
winTop = $(window).scrollTop(),
newsTop = news.offset().top,
show = winTop < newsTop;
return function navAnimation () {
winTop = $(window).scrollTop(),
newsTop = news.offset().top;
// Don't run uneccissarily
if (show && winTop < newsTop) return;
if (!show && winTop >= newsTop) return;
// If something changed, update our state
show = winTop < newsTop;
if (show) {
console.log('animate!');
header.animate({
opacity: 1
}, 500);
} else {
header.animate({
opacity: 0
}, 500);
}
};
})();
$( document ).ready(function(){
$( window ).scroll(navAnimation);
navAnimation();
});
关于javascript - 在导航栏上切换不透明度动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33683427/