停止浮动边栏一旦到达页脚。 jQuery Waypoints

我正在使用this jQuery waypoints plugin来浮动我的边栏。一切工作，因为它应该，但我需要在页脚上设置一个额外的航点，以便边栏不滚动上面，不幸的是我不知道如何编写jQuery代码。停止浮动边栏一旦到达页脚。 jQuery Waypoints

I setup a quick jsfiddle，但请耐心等待，因为这是我第一次使用jsfiddle。

任何帮助将不胜感激，因为我坚持如何做到这一点。

下面是我使用的是当前的jQuery代码：

<script> 
    $(document).ready(function() { 
     $('.sidebar').waypoint('sticky', { 
      offset: 264 // Apply "stuck" class when element 264px from top 
     });; 
    }); 
</script>

来源

2013-01-31 Steven Jones

你可以在这里看到现场工作的例子，http://staging.alcoholrehab-florida.com/alcohol-rehab-programs-test.html –

如果你想做到这一点，无需外部插件：http://stackoverflow.com/a/11971912/1428241 –

感谢您的回应，但这并没有帮助我的侧边栏滚动页脚重叠的问题。我假设我需要为页脚设置一个额外的航点，以触发侧栏类改回相对而不是固定的。我只是不知道如何编码/合并。 –

你并不需要使用插件，您可以轻松地做到这一点你自己。只需调整变量。

Updated: Here is working jsFiddle.

$(window).scroll(function() { 
    var scrollVal = $(this).scrollTop(); 
    if (scrollVal >= 0 && scrollVal < 260) { 
     //between 0 and navigation 

     $('.sidebar').removeClass('stuck').css({'margin-top':'0px'});; 
     $('.content').css({'margin-left':'0px'}); 
    }else if (scrollVal > 260 && scrollVal < 800) { 
     //between navigation and footer 

     $('.sidebar').addClass('stuck').css({'margin-top':'0px'});; 
     $('.content').css({'margin-left':'100px'}); 
    }else if (scrollVal > 800) { 
     //beyond footer 

     $('.sidebar').removeClass('stuck').css({'margin-top':'540px'}); 
     $('.content').css({'margin-left':'0px'}); 
    } 
});

来源

2013-01-31 19:27:52

我明白，但我想达到的目的是在页脚到达时停止修复侧边栏。如果您现在查看它，一旦用户向下滚动足够远，侧栏会重叠页脚。 –

@StevenJones回答更新。 –

太棒了。现在我可以问你为什么选择800的滚动值？如果内容div没有固定的高度，我认为这不起作用，而不是正确的？计算窗口高度并减去页脚高度不是最好的吗？我不熟悉jQuery，所以我不确定这个逻辑是否正确。 –

停止浮动边栏一旦到达页脚。 jQuery Waypoints

回答

相关问题