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

您可以解决问题以删除样式，而不是将它们设置为relativeand 600px。我建议您在 JavaScript 中添加/删除一个类，然后应用固定的 CSS。你最终会得到更好更干净的 JavaScript。

还要确保#navContainer在固定后正确居中。

jsFiddle

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 回答