JQuery Inview动画
JQuery Inview动画
提问于 2012-09-17 05:05:24
我有一个浮动的导航栏，它给我带来了一些小问题...它在很大程度上是完美的..但有一个小小的例外。看一下代码：
<script type="text/javascript">
$('#brand_logo').on('inview mouseenter', function(event, visible) {
if (visible == true) {
// console.log("I got my eye on it Charlie");
$("#topnav").animate({
opacity: 1.0,
width: '98%',
height: '38px'
});
// $(".head-wrap-left").hide();
} else {
// console.log("Let's set the mood.");
$("#topnav").animate({
opacity: 0.9, //0.6 original
width: '310px',
height: '33px',
});
$("#topnav_behind").slideUp();
$('#topnav').bind({
mouseenter: function() {
$("#topnav").animate({opacity: 1.0, width: '98%', height: '38px'})
},
mouseleave: function() {
$("#topnav").animate({opacity: 0.9, width: '310px', height: '33px'})
}
});
};
// $(".head-wrap-left").show();
});
</script>当我向下滚动页面时，它会将导航栏缩小到310px、高度等。如果用户在页面的一半位置将鼠标悬停在导航栏的缩小部分，它会打开并显示完整的导航栏。当他们的鼠标离开时，它会缩小回来(假设他们仍然在页面的中间)。
当用户返回顶部时，导航栏就会打开(它应该是这样的)。如果我将鼠标悬停在工具栏上，它将不会做任何事情，但当我的鼠标离开时，它将收缩回来。我不希望在页面顶部发生这种情况。有没有比查看"#brand_logo“是否在视口中更好的检查方法？
回答 1
Stack Overflow用户
发布于 2012-09-17 05:18:22
在mouseleave事件函数中检查滚动条向下的距离：
mouseleave: function() {
if($(window).scrollTop() > 500 {
$("#topnav").animate({opacity: 0.9, width: '310px', height: '33px'})
}
}将500更改为最合适的值。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12450729
复制相关文章
相似问题
腾讯云开发者
