Sticky 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变粘时，偏移顶部总是小于window滚动，因为它总是在页面的可见部分。那么，我做了什么？

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() 和 flag

来简化 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:

#main {
  height: 1000px;
}
.leed_block {
  margin-top: 250px;
  position: -webkit-sticky; /* needed for Safari */
  position: sticky;
  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">
    sticky div
  </div>
</div>

Sticky div 工作不正确

Sticky div work incorrect

jquery

sticky