如果基於滾動位置的聲明不起作用

當滾動藍色部分時，我需要導航欄爲白色。我試圖自己做這件事，但它不能正常工作。這不是我試圖達到的最終結果，我只是需要這個工作，以便我可以繼續編碼。感謝如果基於滾動位置的聲明不起作用

$(window).scroll(function() { 
 
    var scrollPos = $(window).scrollTop(); 
 
    var page1Top = $("#sec_one").scrollTop(); 
 
    var page1Bot = $("#sec_one").outerHeight(); 
 

 
    var page2 = $("#sec_two").scrollTop(); 
 
    var page3 = $("#sec_three").scrollTop(); 
 

 
    if (scrollPos => page1Top && scrollPos < page1Bot) { 
 
    $('nav').css("background-color", "#ffffff"); 
 
    } 
 
});

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
nav { 
 
    width: 100%; 
 
    background-color: black; 
 
    position: fixed; 
 
    top: 0; 
 
} 
 

 
nav ul { 
 
    width: 50%; 
 
    margin: 0 auto; 
 
    list-style-type: none; 
 
    text-align: center; 
 
} 
 

 
nav ul li { 
 
    display: inline; 
 
    width: 100%; 
 
} 
 

 
nav ul li a { 
 
    font-size: 40px; 
 
    color: white; 
 
    text-decoration: none; 
 
} 
 

 
nav ul li a {} 
 

 
.sections { 
 
    width: 100%; 
 
    height: 100vh; 
 
} 
 

 
#sec_one { 
 
    background-color: blue; 
 
} 
 

 
#sec_two { 
 
    background-color: red; 
 
} 
 

 
#sec_three { 
 
    background-color: yellow; 
 
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
 

 
<nav> 
 
    <ul> 
 
    <li><a href="" id="link 1">Link 1</a></li> 
 
    <li><a href="" id="link 2">Link 2</a></li> 
 
    <li><a href="" id="link 3">Link 3</a></li> 
 
    </ul> 
 
</nav> 
 

 
<div id="sec_one" class="sections"> 
 

 
</div> 
 

 
<div id="sec_two" class="sections"> 
 

 
</div> 
 

 
<div id="sec_three" class="sections"> 
 

 
</div>

來源

2017-04-19 Reece

'=>'是javaScript中的一個箭頭函數，使用'> ='代替。 –

這是因爲「大於或等於」需要在JavaScript中這樣寫：>=。你的是這樣的：=>。

而你需要的，如果滾動位置條件爲假改回顏色：

if(scrollPos >= page1Top && scrollPos < page1Bot){ 
    $('nav').css("background-color", "#ffffff"); 
} else { 
    $('nav').css("background-color", "#000000"); 
}

如果藍色部分是在頁面頂部的第一個，你應該把它定義爲白色的CSS代碼。

查看正在工作JSFiddle。

來源

2017-04-19 13:43:17 Hulothe

如果基於滾動位置的聲明不起作用

回答

相關問題