javascript - Make jQuery waypoints unstick when you hit the footer section - Stack Overflow

admin管理员组

文章数量:1328623

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

• javascript
• jquery
• html
• css
• jquery-waypoints

Share Improve this question Follow edited Jun 20, 2016 at 10:24 Quentin Roy 7,88722 gold badges3333 silver badges5252 bronze badges asked Jun 16, 2016 at 8:08 finnersfinners 8851717 silver badges3333 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9 +50

You 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