4

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

$(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然后传递value变量而不是固定数字

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

谢谢

4

2 回答 2

3

这就是你要找的吗？

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");  
}

我在本地对其进行了测试，无论您的窗口大小如何，它似乎都可以工作。它基本上将窗口大小添加到滚动顶部以查看页脚是否已移动到视口中。

2 个音符

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

而你的页脚的 id 不是footerbut pagefooter。:)

于 2012-07-15T18:07:34.610 回答
0

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

例子：

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

只需这样做，即可找到当前页脚位置。

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

我已经准备了一个粗略的LIVE DEMO来解释你。

于 2012-07-15T18:45:12.710 回答