Menu
I want to get an alert when, while scrolling, my footer comes to view.
$(window).on("mousewheel", function(){ if ($(window).scrollTop() + $(window).height() > $('#footer').position().top){ alert("footer visible"); } else{ alert("footer invisible"); } }); http://jsfiddle.net/JRUnr/10/
All conditions with height seem right, but not during scrolling.
359
The scrollTop() method in jQuery is used to set or return the vertical scrollbar position for the selected elements. With the hep of this method, we can find the mouse scroll direction. Parameters: This method accepts single parameter position which is optional.
To get or set the scroll position of an element, you follow these steps: First, select the element using the selecting methods such as querySelector() . Second, access the scroll position of the element via the scrollLeft and scrollTop properties.
scrollTop() + $(window). height() == $(document). height()) { alert("bottom!"); } }); You can test it here, this takes the top scroll of the window, so how much it's scrolled down, adds the height of the visible window and checks if that equals the height of the overall content ( document ).
The scrollTop() method sets or returns the vertical scrollbar position for the selected elements. Tip: When the scrollbar is on the top, the position is 0. When used to return the position: This method returns the vertical position of the scrollbar for the FIRST matched element.
Try this
$(window).scroll(function () { if ($(window).scrollTop() + $(window).height() > $('.footer').offset().top) { alert("footer visible"); } else { alert("footer invisible"); } }); Hope this helps,Thank you
157
There is a jquery plugin for this task named jQuery Waypoints (http://imakewebthings.com/jquery-waypoints/)
$('#footer').waypoint(function(direction) { alert('Top of thing hit top of viewport.'); }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
