2017-05-28 83 views
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>

任何帮助,非常感谢!

回答

2

我修改了脚本,以便在全局范围内有scrollTimer
这样,它可以更容易地设置或清除。

我使用函数来避免太多的重复代码。

看一看!
;)

$(function() { 
 
\t 
 
    var scrollTimer; 
 
    
 
    function setTimer(){ 
 
    scrollTimer = setTimeout(function() { 
 
     $('#top').fadeOut(400); 
 
    }, 1300); 
 
    } 
 
    function clearTimer(){ 
 
    clearTimeout(scrollTimer); 
 
    } 
 
    
 
    
 
    $(window).scroll(function() { 
 
    var scrollTop = $(window).scrollTop(); 
 
    if (scrollTop > 150) { 
 
     $('#top').fadeIn(400); 
 
     clearTimer(); 
 
     setTimer(); 
 
    } 
 

 
    $('#top').hover(
 
     function (e) { 
 
     clearTimer(); 
 
     var scrollTop = $(window).scrollTop(); 
 
     if(scrollTop != 0){ 
 
      $('#top').stop().animate({'opacity':'1'},400); 
 
     } 
 
     }, 
 
     function (e) { 
 
     var scrollTop = $(window).scrollTop(); 
 
     if(scrollTop != 0){ 
 
      setTimer(); 
 
     } 
 
     } 
 
    ); 
 
    }); 
 
    
 
});
body {height:3000px;} 
 
ul, li { 
 
    list-style-type: none; 
 
    list-style: none; 
 
    text-decoration: none; 
 
} 
 
#top, #topStatic { 
 
    height:5%; 
 
    width: 92%; 
 
    max-width:1150px; 
 
    background:gray; 
 
    top: 0; 
 
    left:0; 
 
    right:0; 
 
    box-sizing: border-box; 
 
    margin: 0 auto; 
 
} 
 
#top { 
 
    position: fixed; 
 
    z-index:9999; 
 
} 
 
#top ul { 
 
    width:440px; 
 
    margin:0 auto; 
 
    height:100%; 
 
} 
 
#top li { 
 
    float: left; 
 
    padding: 2% 10px; 
 
} 
 
#top li:hover { 
 
    background-color: #D9D9D9; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav id="top" class="marginLeft"> 
 
    <ul> 
 
    <li><a href="#">home</a></li> 
 
    <li><a href="#aboutus">about us</a></li>  \t \t \t \t 
 
    <li><a href="#projects">projects</a></li> \t 
 
    <li><a href="#contact">contact</a></li> \t \t   
 
    </ul>  
 
</nav>

+1

哇,这正是我一直在寻找!非常感谢!! – Melvin

+0

我在那里接受答案太快了。有一件事情不是我想要的,而是一次盘旋在菜单上(不管我点击菜单项还是只是“徘徊”,菜单不会再出现在滚动中,你是否有机会知道为什么这是? – Melvin

+0

我看到...不透明...继续。 –