Navbarはスクロールの色を変更しますが、このjQueryの仕組みはどうですか？

Question

私は基本的に、スクロール時に色を変えるナビゲーションバー用の別の質問のコードをいくつかコピーしました。これはそれです：

$(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の上をスクロールした後、navbarの色を変更すると言っていることを理解しています。しかし、それは本当に、すべてのオフセットとscrtollTopが何をしているのか分かりません。明らかに、私はJS/jQueryをかなり新しくしました。前もって感謝します。

Answer 1

要約すると、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です学習。ハッピーコーディング。お気軽にお問い合わせください。