相关疑难解决方法(0)

如果元素position: sticky"卡住"并且比视口长,则只能在滚动到容器底部后才能看到其内容.

如果"卡住"元素与文档一起滚动并且一旦到达其底部边缘就停止,那将会很酷.如果用户向后滚动,同样的事情会再次发生,但相反.

例子

TLDR; 有一个库(StickyKit)可以完成我正在寻找的东西,但是在新的异步滚动中表现不佳.

JSFiddle with StickyKit - https://jsfiddle.net/cibulka/4nd3b0tt/ - (这就是我所描述的,但表现不佳,见下文)

JSFiddle与原生 position: sticky - https://jsfiddle.net/cibulka/np6afe9c/1/ - https://jsfiddle.net/cibulka/pxz6e0qv/ - (这不)

背景

很长一段时间,我是StickyKit的快乐用户.不幸的是,它在异步滚动方面效果不佳,越来越多的浏览器使用异步滚动来提高性能.例如,使用新的Firefox Quantum(57),StickyKit几乎无法使用.

我在StickyKit Github中创建了一个问题,但作者似乎放弃了包:https://github.com/leafo/sticky-kit/issues/252

因此,我不得不弃用StickyKit并转向原生position:sticky(使用StickyFill进行polyfilled).不幸的是,有一些事情position:sticky是做不到的,这就是其中之一.

我还有另一个问题position:sticky:位置粘滞:叠加

我正在寻找什么

一个建议,基本上,如何处理这个问题.我想使用不同的JS/jQuery库,编写自己的代码或使用一些古怪的CSS hack来破解position:sticky功能.

我正在尝试实现此Stack Overflow问题中概述的内容,没有jQuery依赖:stackoverflow.com/questions/18358816/sticky-sidebar-stick-to-bottom-when-scrolling-down-top-when-scrolling-up

但我不想劫持这个问题.

基本上,我希望侧边栏中的内容可以独立滚动,但在视口到达滚动条上的侧边栏内容的任一端时固定.

elementTop当侧边栏绝对定位时,我的主要障碍似乎无法计算变量,而且我已设置为全高度的容器的顶部和底部之间.

完整代码如下:

var StickySidebar = function(eventie) {

var container, containerTop, containerHeight,  // container
element, elementTop, elementHeight, elStyle,  // element
viewportTop = -1, viewportHeight, documentTop, // viewport
lastViewportTop, scrollingDown, top = false , bottom = false,// sticky vars

scroll = window.requestAnimationFrame ||
         window.webkitRequestAnimationFrame ||
         window.mozRequestAnimationFrame ||
         window.msRequestAnimationFrame ||
         window.oRequestAnimationFrame ||
         function(callback){ window.setTimeout(callback, 1000/60); },

options =  {
    container : document.querySelector('.sidebar-container'),
    element : document.querySelector('.sidebar'),
    sidebarClass : 'sidebar',
    bottomOffset : -15,
    topOffset: 90,
},

_updateValue = function() …