JQuery:带粘性肚脐的不透明动画只工作一次
JQuery:带粘性肚脐的不透明动画只工作一次
提问于 2015-10-04 10:05:47
我有一个粘稠的导航条，它使用以下代码：
var stickyNavTop = $("#mynavbar").offset().top;
var winheight = $(window).height();
var relation = stickyNavTop / winheight;
function fixNavBar() {
var stickyNav = function(){
var winheight = $(window).height();
var elempos = winheight * relation;
var scrollTop = $(window).scrollTop();
if (scrollTop > elempos) {
$("#mynavbar").addClass('sticky');
$("#logo").animate({opacity: 1}) // <- first animation
} else {
$("#mynavbar").removeClass('sticky');
$("#logo").animate({opacity: 0}) // <- second animation
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
})
}
fixNavBar();css：
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
}
#logo {
position: absolute;
left: 0px;
opacity: 0;
}当我只添加第一个动画时，它工作得很好。当我添加第二个将不透明度重置为0时，当滚动时，它会在加载页面时立即执行。在这种情况下，徽标总是不可见的。
我上传了一个预览这里 (最小化窗口，直到菜单图标出现；第二个动画注释掉)
事先非常感谢..。1月
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-10-04 11:22:49
如果我理解正确，当顶部滚动位置在第一个棕色块之后时，您想要显示小徽标，而不是隐藏它。
每次滚动，您都触发一个新的动画，jQuery是排队所有动画。若要在滚动时隐藏徽标，您必须停止所有以前未完成的动画。
if (scrollTop > elempos) {
$("#mynavbar").addClass('sticky');
$("#logo").animate({opacity: 1})
} else {
$("#mynavbar").removeClass('sticky');
$("#logo").stop(true); // Stop all previous animations
$("#logo").animate({opacity: 0})
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32932295
复制相关文章
相似问题
腾讯云开发者
