如何使用jquery获取元素位置

2023年4月10日 234次阅读

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

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

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

这是演示http://aurelslab.co.uk/ – 如果您的显示器更大或更小,那么我会看到侧边栏不能正常工作

谢谢

最佳答案 这是你想要的吗？

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不是页脚,而是页脚. 🙂

点赞