更改jQuery取決於用戶位於頁面

我試圖做一個導航，用戶向後滾動後背景進來。但是，當用戶處於頁面中間並刷新時，背景消失，需要再次滾動才能重新出現。每當用戶滾動瀏覽標題時，我都會嘗試使其顯示，無論如何，導航背景顏色都會顯示在那裏。更改jQuery取決於用戶位於頁面

任何幫助，將不勝感激！

代碼：

的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>

來源

2017-06-05 aaronfty

您是否嘗試過使用waypoints.js？ –

在滾動的固定標題上有很多例子，你看過那些嗎？ – epascarello

是的，我看了幾個。我無法找到任何有關用戶刷新問題的幫助，並且不得不滾動以使其重新出現。 – aaronfty

你可以試試這個

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

來源

2017-06-05 20:51:11

這是因爲$(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); 

});

來源

2017-06-05 20:53:18 WizardCoder

您不需要創建額外的匿名函數。只需：$（window）.scroll（changeBG） –

良好的捕獲。我已更新。 – WizardCoder

我有點jQuery noob，我需要用這個替換我的整個代碼嗎？或者我需要把它放在特定的地方？ – aaronfty

更改jQuery取決於用戶位於頁面

回答

相關問題