0
我有一个顶部菜单,当我滚动时淡入淡出 - 当我没有时。 当我不滚动时,它在1300毫秒内仍然可见,在此期间我希望它保持可见状态,以防我悬停在它上面。保持淡入/淡出菜单在悬停时可见
滚动上的淡出位工作正常,但如果我将鼠标悬停在上面,它不会保持可见状态。
这是我的代码:
$(function() {
\t \t
\t $(window).scroll(function() {
\t \t var scrollTop = $(window).scrollTop();
\t \t if (scrollTop > 150) {
\t \t \t $('#top').fadeIn(400);
\t \t \t clearTimeout($.data(this, 'scrollTimer'));
\t \t \t $.data(this, 'scrollTimer', setTimeout(function() {
\t \t \t \t $('#top').fadeOut(400);
\t \t \t }, 1300));
\t \t }else{
\t \t \t clearTimeout($.data(this, 'scrollTimer'));
\t \t \t $('#top').fadeOut(400);
\t \t }
\t \t $('#top').hover(
\t \t \t function (e) {
\t \t \t \t var scrollTop = $(window).scrollTop();
\t \t \t \t if(scrollTop != 0){
\t \t \t \t \t $('#top').stop().animate({'opacity':'1'},400);
\t \t \t \t }
\t \t \t },
\t \t \t function (e) {
\t \t \t \t var scrollTop = $(window).scrollTop();
\t \t \t \t if(scrollTop != 0){
\t \t \t \t \t $('#top').stop().animate({'opacity':'0.2'},400);
\t \t \t \t }
\t \t \t }
\t \t);
\t });
\t \t
});
body {height:3000px;}
ul, li {
\t list-style-type: none;
\t list-style: none;
text-decoration: none;
}
#top, #topStatic {
\t height:5%;
\t width: 92%;
\t max-width:1150px;
\t background:gray;
\t top: 0;
\t left:0;
\t right:0;
\t box-sizing: border-box;
\t margin: 0 auto;
}
#top {
\t position: fixed; \t
\t z-index:9999; \t
}
#top ul {
\t width:440px;
\t margin:0 auto;
\t height:100%;
}
#top li {
\t float: left;
\t padding: 2% 10px;
}
#top li:hover {
\t background-color: #D9D9D9;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="top" class="marginLeft">
\t \t \t <ul>
\t \t \t \t <li><a href="#">home</a></li>
\t \t \t \t <li><a href="#aboutus">about us</a></li> \t \t \t \t
\t \t \t \t <li><a href="#projects">projects</a></li> \t
\t \t \t \t <li><a href="#contact">contact</a></li> \t \t
\t \t \t </ul>
\t \t </nav>
任何帮助,非常感谢!
哇,这正是我一直在寻找!非常感谢!! – Melvin
我在那里接受答案太快了。有一件事情不是我想要的,而是一次盘旋在菜单上(不管我点击菜单项还是只是“徘徊”,菜单不会再出现在滚动中,你是否有机会知道为什么这是? – Melvin
我看到...不透明...继续。 –