我很难想出这个。管理以使粘性侧边栏工作,除了我需要它在到达页脚时恢复到相对位置以避免重叠。
这是我迄今所拥有的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});
}
});
提前致谢。