Question

我正在尝试将我的侧边栏位置绝对修改为固定。这个想法是侧栏在接触页脚之前是绝对的，然后它就会被固定。所以代码波纹管在我的大显示器上运行良好，但是在我的小显示器上，侧边栏在它撞到页脚之前变得固定，而我假设在更大的显示器上，侧边栏会进入页脚并且下面的代码不会触发。

$(document).scroll(function() {
    if ($(this).scrollTop() < 5953) {
        $('.hanger').addClass(' hanger sidebar');
        $('.xoxo').removeClass('xoxo2 ')
        $('.xoxo').css("position", "fixed");
    }
})

那么有没有办法动态获取数字5953？我试过了： var value = $('#footer').scrollTop()和var值= $('#footer').offset().top，然后传递value变量而不是固定数字

以下是演示http://aurelslab.co.uk/ - 如果您的显示器更大或更小，那么我会看到侧边栏无法正常工作

由于

Answer 1

这是你想要的吗？

var value           = $(window).height() + $(window).scrollTop(); 
var elementTop      = $('#pagefooter').offset().top;

if( value >= elementTop ) {
    $('.hanger').removeClass('sidebar');
    $('.xoxo').addClass('xoxo xoxo2')
    $('.xoxo').css("position","absolute");  
}
else if( value < elementTop ) {
    $('.hanger').addClass(' hanger sidebar');
    $('.xoxo').removeClass('xoxo2 ')
    $('.xoxo').css("position","fixed");  
}

我在本地测试它似乎工作，无论你的窗口大小。它基本上将窗口大小添加到scrolltop以查看页脚是否已移动到视口中。

2个笔记

当在移动设备上滚动时（如iOS），滚动事件会在所有动力结束时触发。所以你不会看到你在桌面上看到的平滑动作。

页脚的ID不是footer，而是pagefooter。：）

Answer 2

要访问页脚元素，您可以使用元素ID或元素。

实施例

访问页脚元素：$('footer')
要访问页脚ID：$('#pagefooter')

这样做，找到当前的页脚位置。

var currentPosition = $('footer').position().top - $(window).height();

我准备了粗略的 LIVE DEMO 来解释你。

如何使用jquery获取元素位置

2 个答案:

2个笔记

实施例