不带jQuery的粘性侧边栏javascript

如何制作一个有塞子但没有jQuery的粘性垂直边栏？是否有任何代码片段/插件？我不需要它来支持旧的浏览器

我的意思不仅仅是位置：固定，它必须保持在同一个位置，然后当你滚动过某个点时开始变粘（固定）。然后必须在停止点停止跟随

---

喜欢，但不是jQuery。有很多jQuery插件可用。

基本上就是这么简单：

window.onscroll = function() {
    var sticky = document.getElementById('stickynav');
    if( document.body.scrollTop+document.documentElement.scrollTop > 240)
        sticky.className = "stuck";
    else sticky.className = "";
};

---

然后只需在

.Stick

类中定义样式，将

位置：固定

之类的内容添加到元素中。

下面是一个不需要更改

位置：固定

的尝试，使用元素文档距离作为参考，并滚动到底部：

var node = document.getElementById('side'),  // your element
    nodeOffs = node.offsetTop,               // distance relative to its parent
    parent = node;

// loop through parents to determine the distance relative to the document top
while(parent = parent.offsetParent)
  if(parent.offsetTop)
    nodeOffs += parent.offsetTop;

window.addEventListener('scroll', function(event){    

  // current scroll position relative to the body
  var scrollPos = document.body.scrollTop;

  if(scrollPos > nodeOffs){

    // don't do anything if the elements height is larger than the
    // remaining scroll content height (distance including)
    if(scrollPos < (document.body.scrollHeight - node.clientHeight - nodeOffs))
      node.style.top = (scrollPos - nodeOffs) + 'px';

  }else{
      node.style.top = '0px';
  }

});    

var node=document.getElementById（'side'），//您的元素
nodeOffs=node.offsetTop，//相对于其父节点的距离
父节点=节点；
//循环父对象以确定相对于文档顶部的距离
while（parent=parent.offsetParent）
if（父项偏移）
nodeOffs+=parent.offsetTop；
addEventListener（'scroll'，函数（事件）{
//相对于主体的当前滚动位置
var scrollPos=document.body.scrollTop；
如果（滚动位置>节点速度）{
//如果图元高度大于
//剩余滚动内容高度（包括距离）
if（scrollPos<（document.body.scrollHeight-node.clientHeight-nodeOffs））
node.style.top=（scrollPos-nodeOffs）+“px”；
}否则{
node.style.top='0px'；
}
});    

这很可能不会处理所有可能的情况（例如，它没有考虑利润）。这就是为什么有一个插件，你应该使用它，如果你不想调整自己的js

---

可以用较短的JS来完成

const stickyDiv=document.querySelector（“.sticky”）；
addEventListener（“滚动”，函数（）{
stickyDiv.style.top=window.pageYOffset+“px”；
});
。左{
位置：相对位置；
}
.粘的{
位置：绝对位置；
}
/*下面是演示页面所需的CSS*/
.左{
宽度：40%；
浮动：左；
}
.对{
宽度：40%；
最小高度：3000px；
浮动：对；
}

粘性侧边栏标题在这里
此处文本

这里是常规页面
常规页面内容在这里

我知道这是一个老问题，它需要一个JavaScript解决方案，但是，由于这里的主要思想是让一个粘性边栏正常工作，我必须告诉大家，有一个纯CSS解决方案正如预期的那样工作：

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

只需将
sticky
类应用于侧边栏元素，就可以了

当然，这将为你们节省大量的时间和精力

REF:
这是一个多么简单的解决方案。在生产中，OP考虑添加事件侦听器，如果您希望它有其他类，也将类名称分割成数组并删除/添加到它，则该解决方案存在很多问题。这正是我现在正在做的。jQuery插件有几十行代码，如果这么简单，为什么要制作插件？*这个解决方案没有止动块，你不能有可变高度的文档标题，因为偏移量是硬编码的，如果边栏的高度比内容长，并且不允许你滚动到底部，你会感到奇怪，有时你的边栏浮动会比预期的高