Question

我正在使用Bootstrap 3，我有一个带有导航栏的全屏旋转木马。用户完全滚动到轮播后，导航栏将固定在顶部。这很好。

但现在当用户BARELY向下滚动然后向上滚动时，导航栏不会回到原来的位置，它会保持固定在顶部。

这是我的js：

＆＃13;

$(function() {
  var lastfixed = undefined,
    spacerEl = undefined,
    fixed = false,
    ghostElHeight = 0;

  $(document).on('scroll', function() {
    console.log('scroll top : ' + $(window).scrollTop());

    if ($(window).scrollTop() >= $(".carousel").outerHeight()) {
      fixed = true;
      if (fixed === lastfixed) return
      $(".navbar").addClass("navbar-fixed-top");
      ghostElHeight = $(".navbar").outerHeight()
      if (!!!spacerEl) {
        spacerEl = $(".navbar").after(
          '<div class="navspacer" style="height:' + ghostElHeight + 'px">&nbsp;</div>').next();
      }
    }

    if ($(window).scrollTop() < $(".carousel").height() + ghostElHeight) {
      fixed = false;
      if (fixed === lastfixed) return
      ghostElHeight = 0;
      $(".navbar").removeClass("navbar-fixed-top");
      !!spacerEl && spacerEl.remove();
      spacerEl = undefined;
    }

    lastfixed = fixed;

  });
});

＆＃13;

我还创建了一个小提琴：http://jsfiddle.net/thqx9g9b/2/，以便重现您可能需要点击滚轮的错误，在导航栏固定到顶部后向下滚动一点，然后向上滚动。< / p>

奇怪的是我正在做相同的事情，但是使用全屏jumbotron并且没有出现错误。

更新：如果我添加＆＃34;填充：55px＆＃34;在.carousel课上，问题消失了。但如果我在旋转木马中使用图像，这将导致大边界。

以下是填充的更新小提琴：http://jsfiddle.net/thqx9g9b/3/

我的版本与jumbotron一起工作的原因是因为图像设置在父div上并且没有填充引起的边框，我试图在转盘内的各种元素上放置填充但是它需要在父div上工作，有没有人为此做过某种工作或者我错过了什么？

Answer 1

目前你的算法似乎有些偏差。

现在，如果你只滚动一点低于$（＆＃34; .carousel＆＃34;）。outerHeight（）

- ＆GT; fixed不会生效，因此导航栏永远不会丢失navbar-fixed-top类。

你必须改变这个

if ($(window).scrollTop() < $(".carousel").height() + ghostElHeight) {

到

if ($(window).scrollTop() < $(".carousel").height()) {

然后按预期工作。当然，你不必混淆ghostElHeight。只需在HTML中添加navspacer并使用show / hide切换它。

还有另一个问题：您引入了变量lastfixed，这使代码变得复杂。没有lastfixed的更好方法：

改变你的算法

fixed = true;
if (fixed === lastfixed) return

到

if (fixed == true) return
fixed = true;

和假部分相同。这更容易也更清晰。

完整的JS代码：

$(function () {
    var fixed = false;

    $(document).on( 'scroll', function(){

        if($(window).scrollTop()>=$(".carousel").outerHeight())
        {
             if (fixed == true) return
             fixed = true;
             $(".navbar").addClass("navbar-fixed-top");
             $(".navspacer").show();
        }

        if($(window).scrollTop()<$(".carousel").height())
        {
             if (fixed == false) return
             fixed = false;
             $(".navbar").removeClass("navbar-fixed-top");
             $(".navspacer").hide();
        }
    });
});

并在navbar后手动添加navspacer：

<div style="height:100px; display: none;" class="navspacer">&nbsp;</div>

DEMO

Ghost dom元素导航栏固定顶部不会停留在位置

1 个答案: