Javascript div保持固定在croll上的某个点

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

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

---

这里有一种使用纯javascript的方法。如果愿意，您可以将document.getElementById等选择器替换为$id等jQuery选择器

window.onscroll=函数{ var el=document.getElementById'sticky'， s=window.pageYOffset | | document.documentElement.scrollTop，//滚动了多少页 t=document.getElementById'main'.getBoundingClientRect.top；//主div的顶部 ifs>t{ el.style.position='fixed'；//使位置固定而不是绝对位置 }否则{ el.style.position=；//如果返回到原始位置，则清除样式 } } 正文{ 最小高度：200em； 保证金：0； 填充：0； } 标题{ 背景：黑色； 颜色：白色； 填充：.5em； } main{position:relative；}/*很重要，因此粘滞框的位置与此相对*/ 粘的{ 背景：矢车菊蓝； 填充：.5em； 位置：绝对位置； 右：1em； 顶部：1米； 宽度：10em； 颜色：白色； } 这只是一个页眉或工具栏。 当滚动时，它应该保持在顶部。

---

这里有一个jQuery解决方案。如果我们离页面顶部的距离超过10px，则向元素添加一个is sticky类，然后可以使用CSS对其进行样式设置

// store the element in a variable
var element = $('.item'),
    visible = false;

// on scroll
$(window).scroll(function() {

  /**
   * store the scroll distance in px
   * from the top of the viewport
   */
  var scroll = $(window).scrollTop();

  /**
   * if the scroll is greater than or equal
   * to 10px add a class of .is-sticky to the element
   * otherwise we're less than 10px from the top
   * of the document and therefore don't want
   * the element to have the .is-sticky class
   */
  if(scroll >= 10) {
    if(!visible) {
      element.addClass('is-sticky');
      visible = true;
    }
  } else {
    if(visible) {
      element.removeClass('is-sticky');
      visible = false;
    }
  }
});

可能重复的