Determine distance from the top of a ‘div’ to top of the window with JavaScript

by

You can use .offset() to get the offset compared to the document element and then use the scrollTop property of the window element to find how far down the page the user has scrolled:

var scrollTop     = $(window).scrollTop(),
    elementOffset = $('#my-element').offset().top,
    distance      = (elementOffset - scrollTop);

The distance variable now holds the distance from the top of the #my-element element and the top-fold.

Here is a demo: http://jsfiddle.net/Rxs2m/

Note that negative values mean that the element is above the top-fold.

More Related Contents:

  1. Not able to get Regular Expression in javascript
  2. Uncaught ReferenceError: $ is not defined?
  3. How to manage a redirect request after a jQuery Ajax call
  4. Smooth scrolling when clicking an anchor link
  5. Is there a case insensitive jQuery :contains selector?
  6. Regex to replace multiple spaces with a single space
  7. How to detect Ctrl+V, Ctrl+C using JavaScript?
  8. Trying to fire the onload event on script tag
  9. Check if element exists in jQuery [duplicate]
  10. How to show Page Loading div until the page has finished loading?
  11. Jquery load() only working in firefox?
  12. Uncaught SyntaxError: Unexpected token with JSON.parse
  13. Hide select option in IE using jQuery
  14. Play an audio file using jQuery when a button is clicked
  15. Getting Bootstrap’s modal content from another page
  16. Sort an html list with javascript
  17. Programmatically focus on next input field in mobile safari
  18. Detect between a mobile browser or a PhoneGap application
  19. What is the best way to test for an empty string with jquery-out-of-the-box?
  20. jQuery: Slide left and slide right
  21. Limiting the number of characters in a ContentEditable div
  22. Getting a jQuery selector for an element
  23. How to hide a div with jQuery?
  24. JavaScript: get code to run every minute
  25. Is there a way to zoom into a D3 force layout graph?
  26. What is the role of src and dist folders?
  27. javaScript: Can a comma occur after the last set of values in an array?
  28. How to add font types on Quill js with toolbar options?
  29. How to access jQuery in HTML 5 web worker
  30. Incrementing value continuously on mouse hold

Leave a Comment