いくつかのjqueryワードプレスにフックをかけること

Question

私はこのワードプレスにいくつかのJavaScriptとjQueryをフックしていますが、私は最後の10％で助けが必要です。私はスクロールで色を変えるように、スクリプトをnavbarに付けました。下にスクロールすると、ナビゲーションバーの背景が黒色のフォントとボックスの影で白くなります。次に上にスクロールすると、navbarの背景が透明になり、フォントの色が白に変わり、ボックスの影が消えます。問題は最後の部分が起こっていないことです。上にスクロールすると、白い背景が残っています。ここ

はjQueryの：

var $j = jQuery.noConflict(); 

$j(document).ready(function(){ 
    var scroll_start = 0; 
    var startchange = $j('.banner'); //this is where the transition starts. it starts at the banner 
    var offset = startchange.offset(); 
    if (startchange.length){ 

     $j(document).scroll(function(){ 
      scroll_start = $j(this).scrollTop(); 
      if(scroll_start > offset.top) { 
       $j(".navbar-default").css('background', 'white'); //this is the changing color 
       $j(".navbar-brand").css('color', 'black'); //this is the changing font color 
       $j(".navbar-dilly").css('color', 'black'); //this is the right side font color 
       $j(".navbar-default").css('box-shadow', '0 2px 0 0 #000'); 
      } else { 
       $j(".navbar-default").css('background', 'transparent'); // this is the starting color 
       $j(".navbar-brand").css('color', 'white'); // this is the starting font color 
       $j(".navbar-dilly").css('color', 'white'); // this is the right side font color 
       $j(".navbar-default").css('box-shadow', 'none'); 
      } 
     }); 
    } 
}); 

Answer 1

私は少しあなたのコードを編集しました。あなたがやらなければならないことは、変更の開始を統合することだけです。あなたは、scroll_startを0から別の値に設定していたということでした。

var lastScrollTop = 0; 
$j(window).scroll(function(event) { 
    var st = $j(this).scrollTop(); 
    if (st > lastScrollTop) { 
     $j(".navbar-default").css('background', 'white'); //this is the changing color 
     $j(".navbar-brand").css('color', 'black'); //this is the changing font color 
     $j(".navbar-dilly").css('color', 'black'); //this is the right side font color 
     $j(".navbar-default").css('box-shadow', '0 2px 0 0 #000'); 
    } else { 
     $j(".navbar-default").css('background', 'transparent'); // this is the starting color 
     $j(".navbar-brand").css('color', 'white'); // this is the starting font color 
     $j(".navbar-dilly").css('color', 'white'); // this is the right side font color 
     $j(".navbar-default").css('box-shadow', 'none'); 
    } 
    lastScrollTop = st; 
}); 

あなたが追加する必要がある機能を除いて、私はウェブサイト上であなたのコードをテストしているし、それが動作します

出典：。How can I determine the direction of a jQuery scroll event?