1

私はこの質問が以前に尋ねられたことを知っていますが、それらをチェックした後、このようなナビゲーションバーはどれも構築されていないことを確信しています.

基本的に、元の位置を過ぎてスクロールした後、ナビゲーションバーを画面上部の固定位置に「シームレスに」切り替えるのに問題があります。

コードと例をここに含めました：http://jsfiddle.net/r2a6U/

divを固定位置モードに切り替える実際の関数は次のとおりです。

var navPos = $('#navContainer').offset().top;

$(window).scroll(function(){

  var fixIT = $(this).scrollTop() >= navPos;

  var setPos = fixIT ? 'fixed' : 'relative' ;
  var setTop = fixIT ? '0' : '600' ;

  $('#navContainer').css({position: setPos});
  $('#navContainer').css({'top': setTop});

});

どんな助けでも大歓迎です。

乾杯

4

2 に答える 2

2

relativeスタイルをおよびに設定する代わりに、スタイルを削除するように問題を修正できます600px。JavaScript でクラスを追加/削除することをお勧めします。これにより、固定 CSS が適用されます。最終的には、はるかに優れたクリーンな JavaScript になります。

#navContainerまた、固定するときは、適切に中央に配置してください。

jsフィドル

CSS

#navContainer.fixIT {
    position:fixed;
    top:0;

    /* these will ensure it is centered so it doesn't jump to the side*/
    left:0;
    right:0;
    text-align:center;
}

JS

var navPos = $('#navContainer').offset().top;
$(window).scroll(function(){
    var fixIT = $(this).scrollTop() >= navPos;

    if (fixIT)
        $('#navContainer').addClass('fixIT');
    else
        $('#navContainer').removeClass('fixIT');
});
于 2013-04-10T09:08:57.100 に答える
0

ここで修正してください: jsFiddle

小さなスクリプトの更新のみ:

var navPos = $('#navContainer').offset().top;

$(window).scroll(function(){ var navContainer = $('#navContainer');

    if( $(this).scrollTop() >= navPos ) {
        // make it fixed to the top
        $('#navContainer').css({ 'position': 'fixed', 'top': 0 });
    } else {
        // restore to orignal position
        $('#navContainer').css({ 'position': 'relative', 'top': 600 });
    }
});
于 2013-04-10T09:17:01.607 に答える