5

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

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

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

4

4 回答 4

7

基本上就这么简单：

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向元素添加类似内容的样式。

于 2013-06-16T17:22:33.190 回答
3

这是一个不需要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，你应该使用它......

（测试）

于 2013-06-16T19:02:47.733 回答
2

可以用更短的 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

于 2019-10-23T18:43:26.907 回答
1

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

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

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

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

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

于 2020-05-18T08:18:33.373 回答