没有 jQuery 的粘性侧边栏 javascript答案

【问题标题】：Sticky sidebar javascript without jQuery没有 jQuery 的粘性侧边栏 javascript
【发布时间】：2021-01-04 09:06:23
【问题描述】：

你如何制作一个带塞子的粘性垂直侧边栏，但没有 jQuery？是否有任何 sn-ps/插件？我不需要它来支持旧版浏览器。

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

像http://stickyjs.com，但不是 jQuery。有很多 jQuery 插件可用。

【问题讨论】：

标签： javascript css

【解决方案1】：

基本上就这么简单：

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

然后只需在 .stuck 类中定义样式，将 position:fixed 之类的内容添加到元素中。

【讨论】：

多么简单的解决方案啊。生产中的 OP 考虑添加一个事件侦听器，如果您希望它有其他类也将 className 切片到数组并删除/添加到它
这个方案有很多问题。这正是我现在正在做的事情。 jQuery插件有几十行代码，如果这么简单，他们为什么要做一个插件？ * 这个解决方案没有停止器，你不能有可变高度的文档标题，因为偏移量是硬编码的，如果侧边栏的高度比内容长并且不让你滚动到底部，有时会吓坏让你的侧边栏浮得比预期的高

【解决方案2】：

这是一个不需要position: fixed更改的尝试，使用元素-文档距离作为参考，让我们滚动到底部：

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';
  }

});

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

(test)

【讨论】：

【解决方案3】：

可以用更短的 JS 来做到这一点。

const stickyDiv = document.querySelector(".sticky");
window.addEventListener("scroll", function() {
  stickyDiv.style.top = window.pageYOffset + "px";
});

.left {
  position: relative;
}
.sticky {
  position: absolute;
}

  /* below is unecessary CSS just to demo the page */
.left {
  width:40%;
  float:left;
}
.right {
  width: 40%;
  min-height: 3000px;
  float:right;
}

<div class="container">
  <div class="row">
    
    <div class="left">
      <article class="sticky">
        <h2>Sticky sidebar title here</h2>
        <p>Text here</p>
      </article>
    </div>
    
    <div class="right">
      <article>
        <h2>Regular page here</h2>
        <img src="http://lorempixel.com/400/200/cats">
        <p>Regular page content here.</p>
      </article>
    </div>
    
  </div>
</div>

https://codepen.io/MistaPrime/pen/vYYxvza

【讨论】：

【解决方案4】：

我知道这是一个老问题，它要求一个 JavaScript 解决方案但是，因为这里的主要想法是让一个粘性侧边栏工作，我必须分享一个纯 CSS 解决方案，它可以按预期工作：

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

只需将 sticky 类应用于您的侧边栏元素即可。

这肯定会为大家节省大量时间和精力。

参考号：https://developer.mozilla.org/es/docs/Web/CSS/position#sticky

【讨论】：