如何阻止粘贴边栏重叠页脚?

时间:2015-07-31 18:41:05

标签: jquery

我很难想出这个。管理以使粘性侧边栏工作,除了我需要它在到达页脚时恢复到相对位置以避免重叠。

这是我迄今所拥有的Demo,有人可以向我解释我哪里出错吗?

var top = $('.sidebar-container').offset().top - parseFloat($('.sidebar-container').css('margin-top').replace(/auto/, 0));
var footerTop = $('footer').offset().top - parseFloat($('footer').css('margin-top').replace(/auto/, 0));
var sidebarHeight = $('.sidebar-container').outerHeight();
var s = $(".sidebar-container");
var pos = s.position(); 

$(window).scroll(function() {
  var windowpos = $(window).scrollTop() + 200;
  var stickyBottomPos = sidebarHeight + top;    

  if (windowpos >= pos.top) {
     s.addClass('leftsidebarfixed');
  } else if (stickyBottomPos >= footerTop) {
     var stopPosition = footerTop - sidebarHeight;
     s.removeClass('leftsidebarfixed').css({top: stopPosition});
  } else { 
     s.removeClass('leftsidebarfixed');
  }
});

更新

我已经做了进一步的改进,这可能对其他人有所帮助,我只需要让它停在固定在页脚右上方的位置。

继承人demo

var sidebarHeight = $('.sidebar-container').outerHeight();
var s = $(".sidebar-container");
var pos = s.position(); 

$(window).scroll(function() {
    var limit = $('footer').offset().top - sidebarHeight;
    var windowTop = $(window).scrollTop() + 200; // returns number

    if (pos.top < windowTop){
      s.addClass('leftsidebarfixed');
    } else {
      s.removeClass('leftsidebarfixed').css('top', 200);
    }

    if (limit < windowTop) {
      var diff = limit - windowTop;
      s.css({top: diff});
    }
});

提前致谢。

0 个答案:

没有答案