在页脚之前固定固定边栏停止

Question

好吧，我尝试了一些 js，但我不知道该怎么做。我想制作一个 Stick Sidebar，但我想在 #footer 之前 'fixed' 移动停止。

我试试看：

jQuery("document").ready(function($){

var nav = $('#ultimos-videos');

$(window).scroll(function () {
    if ($(this).scrollTop() > 420) {
        nav.addClass("ultimos-videos-fixed");
    } else {
        nav.removeClass("ultimos-videos-fixed");
    }
}); });

我的 div 是这样的：

#ultimos-videos {}
.ultimos-videos-fixed {position: fixed; top: 70px;}

有人有解决办法吗？谢谢！

Answer 1

这变得非常混乱，因为您必须计算容器和粘性元素的填充、高度和偏移量。不过有一个插件可以非常有效地做到这一点：

http://leafo.net/sticky-kit/

Answer 2

所以你只需要计算从页脚顶部位置减去侧边栏高度和你拥有的任何其他高度的距离，根据你发布的固定 css 的外观还有另一个70 像素，然后像你对 ultimos-videos-fixed class 所做的那样发射另一个 class。唯一的区别是您将把元素绝对定位在侧边栏所在内容的底部，因此您需要将侧边栏放在相对定位的元素中，这样它才能停止。所以这里所说的就是你将如何去做：

检查整个动作的以下 JSFiddle。我在 javascript 部分添加了一些评论供您阅读，以便您更好地理解它是如何工作的 Click Here To View Fiddle

jQuery("document").ready(function($){
  var nav = $('#ultimos-videos');
  var footerTop = $('footer').offset().top;
  var navHeight = $('#ultimos-videos').outerHeight();
  var stopPoint = footerTop - navHeight - 70;
  $(window).scroll(function () {
      if ($(this).scrollTop() >= 420) {
          nav.addClass("ultimos-videos-fixed");
      } else {
          nav.removeClass("ultimos-videos-fixed");
      }
      if ($(this).scrollTop() >= stopPoint) {
          nav.addClass("ultimos-videos-stop");
      } else {
          nav.removeClass("ultimos-videos-stop");
      }
  });
});

css:

.whatever-div-your-sidebar-is-a-child-of {
  posiiton:relative;
}
.ultimos-videos-fixed {
  position: fixed; 
  top: 70px;
  left: 0;
}
.ultimos-videos-stop{
  position:absolute;
  bottom: 0;
  top:auto;
  left: 0;
}

在页脚之前固定固定边栏停止

Stick Fixed Sidebar stop before footer

html

css

jquery

sticky