粘性div工作不正确

Question

我用这个脚本制作了粘性div -

$(window).scroll(function() {
  var leedoffset = $('.leed_block').offset().top;
    if ($(window).scrollTop() >= leedoffset) {
        $('.leed_block').addClass('sticky');
    } else {
        $('.leed_block').removeClass('sticky');
    }
})

但是当div变粘时，偏移顶部始终小于窗口滚动，因为它始终位于页面的可见部分。 那么，我做了什么？

Answer 1

在 scroll() 处理程序之外定义leedoffset，否则会在每个滚动事件上更新。

var leedoffset = $('.leed_block').offset().top;
// otherwise it will become `0` after position changed

$(window).scroll(function() {
  console.log(leedoffset,$(window).scrollTop());
  if ($(window).scrollTop() > leedoffset) {
    $('.leed_block').addClass('sticky');
  } else {
    $('.leed_block').removeClass('sticky');
  }
})

#main {
  height: 1000px;
}
.leed_block {
  margin-top: 250px;
}
.sticky {
  position: fixed;
  margin-top:0;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">
  <div class="leed_block">
    div
  </div>
</div>

如果屏幕调整大小导致问题，那么您可以在 resize() 处理程序

的帮助下执行此类操作

var leedoffset = $('.leed_block').offset().top;
// otherwise it will become `0` after position changed

$(window).scroll(function() {
  console.log(leedoffset, $(window).scrollTop());
  if ($(window).scrollTop() > leedoffset) {
    $('.leed_block').addClass('sticky');
  } else {
    $('.leed_block').removeClass('sticky');
  }
}).resize(function() {
  leedoffset = $('.leed_block').removeClass('sticky').offset().top;
  // check updated value after removing sticky class
  $(window).scroll();
  // trigger scroll event for updating
});

#main {
  height: 1000px;
}
.leed_block {
  margin-top: 250px;
}
.sticky {
  position: fixed;
  margin-top: 0;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">
  <div class="leed_block">
    div
  </div>
</div>

您可以使用带标记

的 toggleClass() 来简化if else语句

var leedoffset = $('.leed_block').offset().top;
// otherwise it will become `0` after position changed

$(window).scroll(function() {
  console.log(leedoffset, $(window).scrollTop());
  $('.leed_block').toggleClass('sticky', $(window).scrollTop() > leedoffset);
}).resize(function() {
  leedoffset = $('.leed_block').removeClass('sticky').offset().top;
  // check updated value after removing sticky class
  $(window).scroll();
  // trigger scroll event for updating
});

#main {
  height: 1000px;
}
.leed_block {
  margin-top: 250px;
}
.sticky {
  position: fixed;
  margin-top: 0;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">
  <div class="leed_block">
    div
  </div>
</div>

更新：根据您的评论，您可以执行以下操作

var leedoffset = $('.leed_block').offset().top;
// otherwise it will become `0` after position changed

$(window).scroll(function() {
  if ($('.leed_block').is(':not(.sticky)'))
  // get the offset only if the sticky class is not added  
    leedoffset = $('.leed_block').offset().top;
  if ($(window).scrollTop() > leedoffset) {
    $('.leed_block').addClass('sticky');
  } else {
    $('.leed_block').removeClass('sticky');
  }
})

#main {
  height: 1000px;
}
.leed_block {
  margin-top: 250px;
}
.sticky {
  position: fixed;
  margin-top: 0;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">
  <div class="leed_block">
    div
  </div>
</div>

Answer 2

如果不需要使用Internet Explorer（请参阅Can I use），则不再需要JavaScript：

.leed_block {
  position: -webkit-sticky; /* needed for Safari */
  position: sticky;
  top: 0;
}