スクロールメソッド内のJQueryホバーメソッド

Question

this siteに表示されるnavbarを模倣しようとしていますが、JQueryに問題があります。スクロールの書式設定にifステートメントを使用していて、ifステートメントの最後にホバー（hover）メソッドを追加しています。

$(function() { 
$(window).scroll(function() { 
var scroll = $(window).scrollTop(); 
if (scroll >= 100) { 
    $("nav").css("background-color","white"); 
    $("nav").css("height","75px"); 
    $(".navbar-default .navbar-brand").css("color","black"); 
    $(".navbar-default .navbar-nav > li > a").css("color","black"); 
} 
else { 
    $("nav").css('background-color','rgba(0, 0, 0, 0)'); 
    $(".navbar-default .navbar-brand").css("color","white"); 
    $(".navbar-default .navbar-nav > li > a").css("color","white"); 
    $("nav").css("height","125px"); 
    $("nav").hover(function(){ 
    $(this).css("background-color", "white"); 
    }, function(){ 
    $(this).css("background-color", "rgba(0, 0, 0, 0)"); 
    }); 
} 
}); 
}); 

私が持っている現在のコードの問題は、私が透明にスクロールした後、私はそれが変更と白の滞在ではないしたいときホバー方法は、ナビゲーションバーを変えているということです。

Answer 1

あまりにも多くのJavaScriptを使用しています。 CSSに要素のスタイルを設定させる必要があります。 .cssを複数回使用する代わりに、単純にクラスをnavに追加し、それに基づいてスタイルを設定します。

.hoverの部分もCSSで行うことができます。親指のルールは、他のイベントハンドラの中にイベントハンドラを決して添付してはいけません。常に良い方法があります。最後に

、あなたはこのようなものが必要です：

免責事項を、あなたのニーズにこのコードを適応させる必要がありますので、私は、あなたがやったようなスタイル、またあなたのHTMLを使用していませんでした。

$(function() { 
 
    var $window = $(window).scroll(function() { 
 
    \t var scroll = $window.scrollTop(); 
 
     $("nav").toggleClass("sticked", scroll >= 100); 
 
    }); 
 
});

body{ 
 
    height : 300vh; 
 
} 
 

 
nav{ 
 
    position : fixed; 
 
    top : 0; 
 
    left : 0; 
 
    width : 100%; 
 
    height : 125px; 
 
    background : transparent; 
 
    } 
 
    
 
    nav .text{ 
 
    color : black; 
 
    } 
 
    
 
    nav:hover{ 
 
    background: red; 
 
    } 
 
    
 
    nav:hover .text{ 
 
     color : white; 
 
    } 
 
    
 
    nav.sticked{ 
 
    background : red; 
 
    height : 75px; 
 
    } 
 
    
 
    nav.sticked .text{ 
 
     color : white; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
<span class="text">text here</span> 
 
</nav>