ホバーでフェードイン/フェードアウトメニューを表示し続ける

Question

私はスクロールするとフェードインし、そうでないときはフェードアウトします。 私がスクロールしていないときは、1300msの間表示され、その間にマウスを置いても表示されるようにしておきます。

スクロールのフェーディングビットは正常に機能しますが、上にカーソルを置くと表示されません。

これは私のコードです：

$(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>

すべてのヘルプははるかに高く評価されます！

Answer 1

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>