javascript - div 固定在滚动的某个点

Question

有一个 div，样式固定在距顶部 60px 的位置。我想要当我向下滚动并且 div 与顶部的距离达到 10px 时，div 停止在那里进行剩余的滚动，当我向上滚动时它会回到旧样式 60px 从顶部。我做了很多搜索，但没有找到这样的东西。但是有一个代码可以计算距顶部的距离:

var scrollTop     = $(window).scrollTop(),
    elementOffset = $('#my-element').offset().top,
    distance      = (elementOffset - scrollTop);

Answer 1

这是使用纯 JavaScript 的一种方法。如果愿意，您可以将一些选择器(例如 document.getElementById)替换为 jQuery 选择器(例如 $("id"))。

window.onscroll = function(){
  var el = document.getElementById('sticky'),
      s = window.pageYOffset || document.documentElement.scrollTop, // how much page is scrolled
      t = document.getElementById('main').getBoundingClientRect().top; // top of main div
  
  if(s > t){
    el.style.position = 'fixed'; //make position fixed instead of absolute
  }else{
    el.style.position = ''; //clear styles if back to original position
  }
}

body { 
  min-height: 200em; 
  margin: 0;
  padding: 0;
}

header {
  background: black;
  color: white;
  padding: .5em;
}

#main { position: relative; } /* important so the sticky box positions relative to this */

#sticky {
    background: cornflowerblue;
    padding: .5em;
    position: absolute;
    right: 1em;
    top: 1em;
    width: 10em;
    color: white;
}

<header>This is just a page header or toolbar.</header>

<section id="main">
  <div id="sticky">This should stick to the top when scrolled.</div>
</section>