2016-07-27 7 views
1

スクロールするときに固定されるナビゲーションバーがあります。ナビゲーションバーは完全に機能します。ただし、プライマリナビの下に開くセカンダリのナビゲーションバーもあります。 2次ナビは、1次ナビをスクロールすると固定されます。JQuery:ページの更新時にスクロール位置を取得する

私のウェブサイトでページをリフレッシュすると、リフレッシュ前のスクロール位置が維持されます。ページを途中で更新してセカンダリナビを開こうとすると、そのページは表示されません。私は、更新時にセカンダリナビから固定位置が削除されていることを発見しました。ただし、スクロール位置から上下にスクロールすると、スクロール位置が読み取られ、固定位置が適用されます。

私はJQuery初心者ですから、この問題を解決するために何が必要なのか正確にはわかりません。私は提案に開放されています。私はリフレッシュ時にスクロール位置を取得する必要があると思う。次に、セカンダリナビゲータの固定位置を削除しないようにロジックを適用できます。

$(window).scroll(function() {     // assign scroll event listener 
 
\t 
 
\t  var s = $("#primary-nav"); 
 
\t \t var pos = s.position();  // get current position 
 
\t \t $(window).scroll(function() { 
 
     var windowpos = $(window).scrollTop(); 
 
     //s.html("Distance from top:" + pos.top + "<br />Scroll position: " + windowpos); 
 
     if (windowpos > pos.top) { 
 
      $('#secondary-nav').css({ 
 
\t    position: 'fixed', 
 
\t    top: '60px', 
 
\t    zIndex: '505', 
 
\t   }); 
 
     } else { 
 
      $('#secondary-nav').css({ 
 
\t    position: 'static', 
 
\t   }); 
 
    });

答えて

1

私は、スクロールイベントで、最初のページのロード時に、その関数を呼び出し、関数内のすべてのそのコードを入れしようとするだろう。

function navScroll(){ 
 
    
 
    var s = $("#primary-nav"); 
 
    var pos = s.position();  // get current position 
 
    var windowpos = $(window).scrollTop(); 
 
    
 
    //s.html("Distance from top:" + pos.top + "<br />Scroll position: " + windowpos); 
 
    if (windowpos > pos.top) { 
 
     $('#secondary-nav').css({ 
 
      position: 'fixed', 
 
      top: '60px', 
 
      zIndex: '505', 
 
     }); 
 
    } else { 
 
     $('#secondary-nav').css({ 
 
      position: 'static', 
 
     }); 
 
    } 
 
} 
 

 
$(window).scroll(function() { 
 
    navScroll(); 
 
}); 
 

 
$(document).ready(function() { 
 
    navScroll(); 
 
});

0

文書準備関数内のコードを修正ヘッダを使用

$(document).ready(function(){ 
// code here 
}); 
関連する問題