0

一旦达到 scrollTop，我有两个 div 实例从相对位置转换为固定位置。但是，我正在寻找一种在页脚 div 滚动到时关闭一个功能的方法。如果您查看此页面上的侧边栏，您可以更好地了解我想要实现的目标，http://staging.alcoholrehab-florida.com/alcohol-rehab-programs.html

一旦页面到达底部页脚 div，我需要将侧边栏设置回 position:relative 以便它不会覆盖页面的其余部分并能够与内容部分一起向上滚动。

下面是我正在使用的当前 jQuery 脚本。非常感谢任何帮助或建议！

    <script>
    $(function() {

// grab the initial top offset of the navigation 
var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;

// our function that decides weather the navigation bar should have "fixed" css position or not.
var sticky_navigation = function(){
    var scroll_top = $(window).scrollTop(); // our current vertical position from the top

    // if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
    if (scroll_top > ( sticky_navigation_offset_top - 120 )) { 
        $('#sticky_navigation').css({ 'position': 'fixed', 'top':120, 'background':'#f0f0f0' });
        $('.container').css({ 'position': 'relative', 'top':144 });
        $('.sidebar').css({ 'position': 'fixed', 'top':264 });
    } else {
        $('#sticky_navigation').css({ 'position': 'relative', 'top':0, 'background':'#fff' });
        $('.container').css({ 'position': 'relative', 'top':60 });
        $('.sidebar').css({ 'position': 'relative', 'top':0 });
    }  
};

// run our function on load
sticky_navigation();

// and run it again every time you scroll
$(window).scroll(function() {
     sticky_navigation();
});

    });
    </script>
4

2 回答 2

0

一种方法是测量窗口高度和文档高度。一旦页面向下滚动到大于（文档高度 - 窗口高度）的值，您就会知道您已经到达底部。然后只需添加页脚高度，如果 scrollTop 大于该高度，则无需将其切换回相对，因为这会将其跳转到页面顶部，只需给它一个负的顶部位置（相对）会让人觉得它被固定在页脚的顶部边缘之上。

很抱歉我没有代码示例，但希望上面的逻辑能帮助你弄清楚你什么时候在底部，以及如何偏移侧边栏以防止它接触页脚。

于 2013-01-25T20:39:13.900 回答
0

我一直将此插件用于粘性元素或仅检测用户何时滚动到某个元素：http: //imakewebthings.com/jquery-waypoints/

于 2013-01-25T20:39:23.193 回答