在特定點停止固定元素滾動

Question

我有固定的側邊欄，它應該與主要內容一起滾動，並在我向下滾動時在某個點停止。 當我向上滾動時，反之亦然。

我編寫了確定 window 高度、scrollY position、position 的腳本，其中側邊欄應該“停止”。 我通過添加 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', '');
    }
});

這是codepen上的現場演示

側欄用橙色背景標記，應該停止的塊用藍色標記。 比你提前的幫助。

Answer 1

我用這里描述的解決方案解決了我的問題

var windw = this;
let board = $('.pagination').offset().top;
let asideHeight = $('aside').outerHeight(true);
let coords = board - asideHeight;
console.log(coords)
$.fn.followTo = function ( pos ) {
    var $this = this,
        $window = $(windw);
        
    $window.scroll(function(e){
      
        if ($window.scrollTop() > pos) {
            $this.css({
                position: 'absolute',
                top: pos
            });
        } else {
            $this.css({
                position: 'fixed',
                top: 0
            });
        }
    });
};

$('aside').followTo(coords);

並將坐標計算為端點偏移頂部 - 側邊欄高度。 您可以在我的codepen中查看解決方案