Stop fixed position at footer

by

Live demo

first, check its offset every time you scroll the page

$(document).scroll(function() {
    checkOffset();
});

and make its position absolute if it has been downed under 10px before the footer.

function checkOffset() {
    if($('#social-float').offset().top + $('#social-float').height() 
                                           >= $('#footer').offset().top - 10)
        $('#social-float').css('position', 'absolute');
    if($(document).scrollTop() + window.innerHeight < $('#footer').offset().top)
        $('#social-float').css('position', 'fixed'); // restore when you scroll up
}

notice that #social-float‘s parent should be sibling of the footer

<div class="social-float-parent">
    <div id="social-float">
        something...
    </div>
</div>
<div id="footer">
</div>

good luck 🙂

More Related Contents:

  1. Scroll Function working in reverse order [closed]
  2. How can I make a div stick to the top of the screen once it’s been scrolled to?
  3. Prevent BODY from scrolling when a modal is opened
  4. Keep overflow div scrolled to bottom unless user scrolls up
  5. Make scrollbar visible in mobile browsers
  6. Synchronized scrolling using jQuery?
  7. jQuery jump or scroll to certain position, div or target on the page from button onclick [duplicate]
  8. Reverse Scrolling
  9. Fade animation while scrolling
  10. Get the longest text in HTML document using Jquery or javascript
  11. Check if a user has scrolled to the bottom (not just the window, but any element) [duplicate]
  12. jQuery SVG, why can’t I addClass?
  13. Setting background-image using jQuery CSS property
  14. How to get the background color code of an element in hex?
  15. “Uncaught TypeError: a.indexOf is not a function” error when opening new foundation project
  16. jQuery: Get selected element tag name
  17. How to use jQuery and jQuery plugins with PrimeFaces
  18. How can I remove the “No file chosen” tooltip from a file input in Chrome?
  19. Save a pre element as PDF with CSS
  20. jQuery event that triggers after CSS is loaded?
  21. Center flex item in container, when surrounded by other flex items
  22. Change the style of :before and :after pseudo-elements? [duplicate]
  23. How to use Javascript to check and load CSS if not loaded?
  24. Remove scrollbar but not scrolling functionality [duplicate]
  25. Pausing CSS animation with javascript and also jumping to a specific place in the animation
  26. fade effect using javascript no jquery?
  27. How to stop user from printing webpages? using javascript or jquery
  28. How can I compare two color values in jQuery/JavaScript?
  29. How should I crop an image at client side using jcrop and upload it?
  30. Removing element with jQuery?

Leave a Comment