admin管理员组文章数量:1327661
So I'm using jQuery waypoints for a sticky social media nav which is working perfectly, however, when I hit the footer element it keeps scrolling. Ideally I would like the sticky nav to stay at the bottom of its parent container (.content) when it hits the footer and conversely when the user scrolls back up then the sticky nav should bee sticky again.
Does anyone know a simple way of achieving this? Here's a fiddle.
var sticky = new Waypoint.Sticky({
element: $('.sticky')[0]
});
So I'm using jQuery waypoints for a sticky social media nav which is working perfectly, however, when I hit the footer element it keeps scrolling. Ideally I would like the sticky nav to stay at the bottom of its parent container (.content) when it hits the footer and conversely when the user scrolls back up then the sticky nav should bee sticky again.
Does anyone know a simple way of achieving this? Here's a fiddle.
var sticky = new Waypoint.Sticky({
element: $('.sticky')[0]
});
Share
Improve this question
edited Jun 20, 2016 at 10:24
Quentin Roy
7,8872 gold badges33 silver badges52 bronze badges
asked Jun 16, 2016 at 8:08
finnersfinners
88517 silver badges33 bronze badges
2
- You could do checks in the scroll function, where you are in the document and get the offsets of the elemnts you want to act depending on scroll position and so on :) – Medda86 Commented Jun 20, 2016 at 10:09
- Hey @Medda86, thanks for your response. Do you have a fiddle available for your answer so I can understand a little better? Thanks. – finners Commented Jun 20, 2016 at 11:28
1 Answer
Reset to default 9 +50You need to set another waypoint in the footer, and when the sticky div is going to reach the footer (that is setup with the offset option), remove the .stuck
class that makes the div to be fixed (with a toggle, the .stuck
class es again when the footer lets the sticky div to be displayed again). You achieve this with:
$('.footer').waypoint(function(direction) {
$('.sticky').toggleClass('stuck', direction === 'up')
}, {
offset: function() {
return $('.sticky').outerHeight()
}});
Check if that is what you want (hope so! :) ): https://jsfiddle/elbecita/mna64waw/3/
EDIT: I forgot one thing!! you need a class for the sticky div when the footer surpasses it, so the final js you need would be:
$('.footer').waypoint(function(direction) {
$('.sticky').toggleClass('stuck', direction === 'up');
$('.sticky').toggleClass('sticky-surpassed', direction === 'down');
}, { offset: function() {
return $('.sticky').outerHeight();
}});
and the .sticky-surpassed
would be:
.sticky-surpassed {
position:absolute;
bottom: 0;
}
Check update here: https://jsfiddle/elbecita/mna64waw/5/
本文标签: javascriptMake jQuery waypoints unstick when you hit the footer sectionStack Overflow
版权声明:本文标题:javascript - Make jQuery waypoints unstick when you hit the footer section - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742230305a2437099.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论