ユーザーがページの場所に応じてjQueryを変更します

Question

私は、ユーザーがスクロールした後に背景が来るようなナビゲーションをしようとしています。しかし、ユーザーがページの途中でリフレッシュすると、背景が消え、再度スクロールして再表示する必要があります。私は、ユーザーがヘッダーを過ぎてスクロールするたびに、ナビゲーションの背景色が何であってもそのようになるようにしようとしています。

助けていただけたら幸いです！

コード：

のjQuery：

$(document).ready(function(){ 
    var targetOffset = $('header').offset().top + $('header').height(); 

    var $w = $(window).scroll(function(){ 
     if ($w.scrollTop() > targetOffset) { 
      $("#nav").css('background-color', 'rgba(35,46,63,1)'); 
     } else { 
     $('#nav').css('background-color', 'rgba(35,46,63,0)'); 
     } 
    }); 
}); 

CSS：

nav { 
    background-color: rgba(35,46,63,0); 
    transition: background-color 200ms linear; 
    position: fixed; 
    left: 0; 
    right: 0; 
    padding: 25px; 
    z-index: 1; 
    box-shadow: 0px 0px 0px rgba(0,0,0,0); 
} 

nav > .wrapper { 
    overflow: hidden; 
} 

nav > .wrapper > li.nav-logo { 
    list-style: none; 
    font-weight: 600; 
    padding: 0px; 
    border-top: 1px solid rgba(0,0,0,0); 
} 

nav > .wrapper > li.nav-logo > a { 
    color: #DDDDDD; 
    text-decoration: none; 
} 

nav > .wrapper > li.nav-logo > a > img.left { 
    width: 5%; 
    display: inline-block; 
    float: left; 
} 

nav > .wrapper > ul.right { 
    list-style: none; 
    float: right; 
} 

nav > .wrapper > ul > li { 
    display: inline-block; 
    list-style: none; 
    font-weight: 400; 
    font-size: 0.9em; 
    padding: 15px; 
    border-bottom: 1px solid rgba(0,0,0,0); 
    border-radius: 6px; 
    vertical-align: middle; 
    transition: all 0.3s ease; 
} 

nav > .wrapper > ul > li > a { 
    color: #FFFFFF; 
    text-decoration: none; 
    transition: all .3s ease; 
} 

nav > .wrapper > ul > li > a:hover { 
    color: white; 
    text-decoration: none; 
} 

HTML：

<nav id="nav"> 
    <div class="wrapper"> 
     <li class="nav-logo"><a href="#"><img class="left" src="assets/images/ugn-logos/single-ugn-logo.png" alt="ugn-logo"></a></li> 
     <span class="nav-btn"><i class="icon-menu"></i></span> 
     <ul class="right"> 
      <li><a href="index.html">Home</a></li> 
      <li><a href="shared-hosting.html">Shared Hosting</a></li> 
      <li><a href="vps.html">VPS</a></li> 
      <li><a href="minecraft.html">Minecraft</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
    </div> 
</nav> 

Answer 1

あなたはこの

を試すことができます

$(document).load(function(){ /* your code */ }); 

Answer 2

$(window).scroll()は、一度スクロールが発生した場合にのみ有効になるからです。同じスクリプトが$(document).ready()で発生する必要があります。したがって、関数を作成し、ウィンドウのサイズ変更とドキュメントの準備ができたら呼び出すことができます。

$(document).ready(function(){ 
    function changeBG() { 
    var targetOffset = $('header').offset().top + $('header').height(); 

    if ($w.scrollTop() > targetOffset) { 
     $("#nav").css('background-color', 'rgba(35,46,63,1)'); 
    } else { 
     $('#nav').css('background-color', 'rgba(35,46,63,0)'); 
    } 
    } 

    changeBG(); 

    $(window).scroll(changeBG); 

});