Navbar改變滾動顏色，這jQuery如何工作？

所以我基本上從另一個問題的一些代碼複製滾動條上的顏色更改的導航欄。這是它：Navbar改變滾動顏色，這jQuery如何工作？

$(document).ready(function(){  
var scroll_start = 0; 
var startchange = $('#startchange'); 
var offset = startchange.offset(); 
    if (startchange.length){ 
$(document).scroll(function() { 
    scroll_start = $(this).scrollTop(); 
    if(scroll_start > offset.top) { 
     $(".navbar-default").css('background-color', '#f0f0f0'); 
    } else { 
     $('.navbar-default').css('background-color', 'transparent'); 
    } 
}); 
}

}）;

這一切都運行良好（有必要的id /類改變ofcourse），但我想知道它是如何工作，因爲我不知道。我知道這段代碼基本上是說在屏幕頂部滾動到#startchange的頂部後，更改導航欄的顏色。但是，這是真的，我不知道所有的補償和ScrtollTop正在做什麼。顯然，即時通訊相當新的JS/jQuery。提前致謝。

來源

2017-04-14 Reece .N

總結Offset（）和ScrollTop（）是JQuery函數。 JQuery只是一個Javascript函數庫。 JS是您的瀏覽器解釋的語言。

讓我給你真實的定義：

偏移（）：獲取第一個元素的當前座標匹配的元素，相對於文檔的。

SrollTop（）：獲取匹配元素集中第一個元素的滾動條的當前垂直位置或爲每個匹配元素設置滾動條的垂直位置。

當文檔準備就緒時，您的代碼執行一個函數。

$(document).ready(function(){

它由3個變量（var）支持。

var scroll_start = 0; 
var startchange = $('#startchange'); 
var offset = startchange.offset();

而當事件「滾動」檢測代碼文件的調用改變一些CSS屬性的元素與類的導航欄默認'的功能。當滿足條件，且已滾動更高的價值與ID爲「startchange」（#startchange）

$(document).scroll(function() { 
    scroll_start = $(this).scrollTop(); 
    if(scroll_start > offset.top) { 
     $(".navbar-default").css('background-color', '#f0f0f0'); 
    } else { 
     $('.navbar-default').css('background-color', 'transparent'); 
    } 
});

這裏是JQuery Documentation，您可以諮詢各功能的元素比偏置

快樂學習。快樂的編碼。隨意問你需要什麼。

來源

2017-04-14 12:15:37 Sam

感謝您的回答，但如果我想在功能發生時更改，那該怎麼辦？在這段代碼中，當屏幕的頂部滾動到#startchange的頂部時，css會發生變化，但是如果我想在滾動到#startchange的底部之後更改它，那該怎麼辦？沒有offset.bottom的權利？ –

不，但還有另一個函數height（）：獲取m：atched元素集合中第一個元素的當前計算高度。通過它可以玩一個元素的底部偏移值。只需將組件的高度添加到OffsetlTop的值（offset.top + component.height）請點擊此處我回答了一些與此有關的其他JQuery請求，或許您可以看到一些示例。 http://stackoverflow.com/a/43403139/7733724 – Sam

你需要記住，JQuery不提供特定場景的一般方法，但給我們提供了DOM DOM'Domination'（在其他之間）的工具。什麼意思你通常會發現一些有用的函數或函數組合，可以讓你根據每個場景/情況爲每個DOM元素執行所需的操作。大多數JQuery表達式都包含多個函數。用$（）開始是一個JQuery函數，它讓我們創建一個快速的getElementbyId/getElementByClass JS函數。首先要了解這些工具，首先要了解這些語法，然後瞭解可用的功能和練習 – Sam

Navbar改變滾動顏色，這jQuery如何工作？

回答

相關問題