时间戳

首页 > 解决方案 > 使侧边栏在页面滚动时保持粘性

jquery - 使侧边栏在页面滚动时保持粘性

问题描述

我正在尝试使页面的侧边栏在页面滚动时保持粘性。

我尝试了不同的解决方案，但它不起作用......

这是我的最后一次尝试：

$( document ).ready(function() {
  console.log( "document ready!" );

  var $sticky = $('.sticky');
  var $stickyrStopper = $('.sticky-stopper');
  if (!!$sticky.offset()) { // make sure ".sticky" element exists

    var generalSidebarHeight = $sticky.innerHeight();
    var stickyTop = $sticky.offset().top;
    var stickOffset = 0;
    var stickyStopperPosition = $stickyrStopper.offset().top;
    var stopPoint = stickyStopperPosition - generalSidebarHeight - stickOffset;
    var diff = stopPoint + stickOffset;

    $(window).scroll(function(){ // scroll event
      var windowTop = $(window).scrollTop(); // returns number

      if (stopPoint < windowTop) {
          $sticky.css({ position: 'absolute', top: diff });
      } else if (stickyTop < windowTop+stickOffset) {
          $sticky.css({ position: 'fixed', top: stickOffset });
      } else {
          $sticky.css({position: 'absolute', top: 'initial'});
      }
    });

  }
});

这里是我页面的源代码：https ://codepen.io/anon/pen/bPareG

你们中的任何人都可以帮助我吗？

非常感谢。

标签： jqueryhtmlcsssticky

解决方案

正如 robinvrd 在评论中所建议的那样，我会使用固定位置，因为它避免了计算新 Y 位置的麻烦（更好地说，浏览器会在内部处理这个问题）。因此，假设您希望粘性框滚动直到它到达视口的末端，然后在侧面保持可见，这将是一个解决方案：

$(window).scroll(function() {
  // scroll event
  var windowTop = $(window).scrollTop(); // returns number

  if (stickyTop < windowTop + stickOffset) {
    $sticky.css({ position: "fixed", top: 0, right: 0 });
  } else {
    $sticky.css({ position: "absolute", top: "initial", right: 0 });
  }
});

更改后的代码可以在提到的Codepen中找到。

推荐阅读