Question

我知道，它被问了一百万次。但是，Google上的解决方案似乎都不起作用。

我的代码很棒！直到它击中页脚。它似乎发现它已经击中了页脚;但是如果我进一步滚动它返回到位置固定。我使用console.log来确定if语句似乎是冲突的......

任何帮助将不胜感激！

// When the user scrolls...
$(window).scroll(function() {

var offset = $('#offset').offset(); // trigger point for sidebar to become fixed... sits at top of page
var footerTop = $('#footer').offset();
var windowTop = $(window).scrollTop();
var sidebar = $('#sidebar');
var sideBarBottom = sidebar.offset().top + sidebar.height();

// Make it sticky
if (!(sideBarBottom > footerTop.top - 25)) {
    console.log("SBB" + sideBarBottom + "   FT: " + (footerTop.top - 25));
    if (windowTop > offset.top) {
        sidebar.css('position', 'fixed');
        sidebar.css('top', '80px');
        sidebar.css('left', '69.5%');
        sidebar.css('width', '270px');
    } else {
        sidebar.css('position','static');
        sidebar.css('width', '270px');
    }
} else {
    console.log('absolute');
    sidebar.css('position', 'absolute');
    sidebar.css('top', $(window).height() - ($('#footer').height() + 100));
    sidebar.css('width', '270px');
}

});

Answer 1

如果没有看到HTML上下文，很难知道发生了什么，但似乎您只是在console.log('absolute')下的代码运行时，您的碰撞测试在后续尝试中停止正常工作。

如果不出意外，声明sidebar.css('top', $(window).height() - ($('#footer').height() + 100)))看起来错了。您从与页脚位置无关的值计算侧边栏的位置，因此很难看出它会如何导致它出现在正确的位置屏幕上;我以为你想要更像sidebar.css('top', (footerTop - sidebar.height() - 25) + 'px')的东西。（假设侧边栏的布局父级是文档）

如何使页脚固定侧边栏停止[JQUERY]？

1 个答案: