在某个点停止固定元素滚动

如何解决在某个点停止固定元素滚动

我有固定的侧边栏，它应该与主要内容一起滚动，并在我向下滚动时停在某个点。当我向上滚动时，反之亦然。

我编写了确定窗口高度、滚动位置、侧边栏应该“停止”的位置的脚本。我通过添加 css 'bottom' 属性来停止侧边栏。但是这种方法有两个问题：

1. 当侧边栏接近它应该停止的“分页”时，它突然跳下来。当我向上滚动时，它突然跳了起来。
2. 当我滚动页面时，侧边栏一直在移动

这是我的代码。 HTML：

<div class="container">
  <aside></aside>
  <div class="content">
    <div class="pagination"></div>
  </div>
  <footer></footer>
</div>

CSS：

aside {
  display: flex;
  position: fixed;
  background-color: #fff;
  border-radius: 4px;
  transition: 0s;
  transition: margin .2s,bottom .05s;
  background: orange;
  height: 350px;
  width: 200px;
}

.content {
  display: flex;
  align-items: flex-end;
  height: 1000px;
  width: 100%;
  background: green;
}

.pagination {
  height: 100px;
  width: 100%;
  background: blue;
}

footer {  
  height: 500px;
  width: 100%;
  background: red;
}

JS：

let board = $('.pagination')[0].offsetTop;
let filterPanel = $('aside');
    if (board <= window.innerHeight) {
        filterPanel.css('position','static');
        filterPanel.css('padding-right','0');
    }

$(document).on('scroll',function () {
    let filterPanelBottom = filterPanel.offset().top + filterPanel.outerHeight(true);
    let bottomDiff = board - filterPanelBottom;

    if(filterPanel.css('position') != 'static') {

        if (window.scrollY + window.innerHeight - (bottomDiff*2.6) >= board)
            filterPanel.css('bottom',window.scrollY + window.innerHeight - board);
        else
            filterPanel.css('bottom','');
    }
});

Here's live demo on codepen

侧边栏标有橙色背景，应停止的块标有蓝色。比你提前提供的帮助。

解决方法

我用 here

描述的解决方案解决了我的问题

app.use(function(req,res,exit) {
    if(req.session.loggedin) {
        app.locals.loggedin = true;
    }
    else {
        app.locals.loggedin = false;
    }
    res.app.use(express.static(path.join(__dirname,'/site/data')))
    exit();
})

并计算坐标作为端点偏移顶部 - 侧边栏高度。您可以在我的 codepen

中查看解决方案