Question

嗯，我尝试了一些js，但我没有做到这一点。我想制作一个Stick Sidebar，但我想要修复＆＃39;在#footer之前停止。

我试试看：

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;}

有人有解决方案吗？感谢＆＃39;！小号

Answer 1

这非常麻烦，因为你必须计算容器和粘性元素的填充，高度和偏移量。有一个插件可以很有效地完成它：

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

Answer 2

所以你只需要计算从页脚顶部位置减去侧边栏高度和任何其他高度的距离，以及你已经发布的固定css的外观与另外70 px的距离，然后另一个就像你用ultimos-videos-fixed类所做的那样。唯一的区别是你将元素绝对地放在你的侧边栏所在内容的底部，这样你就需要将侧边栏放在一个相对定位的元素中，这样它就可以停止了。所以这里所说的就是你将如何做到这一点：

检查以下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;
}

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

2 个答案: