The following code is used to detect if a user has scrolled to the bottom of the page and it works.
if($(window).scrollTop() == $(document).height() - $(window).height()){
//do something
}
Problem:
I don't understand why you subtract the height of the window from the height of the document, then compare that to the scroll height to determine whether or not the bottom of the page has been reached. Why isn't it simply
if($(window).scrollTop() == $(document).height()){
//do something
}
or
if($(window).scrollTop() == $(window).height()){
//do something
}
This is because $(window).scrollTop() returns the position of the top of the page, and $(document).height() returns the position of the bottom of the page. Therefore you need to subtract the height of the window to get the position to compare against, as this will give you the position where the top of the page would be if you were fully scrolled to the bottom.
$(window).scrollTop() is the location of the top of the window relative to the document. On the page I'm looking at right now, that's 1385 if I'm scrolled to the very bottom. $(document).height() is the height of the entire page (1991 for me). $(window).height() is the height of the window (viewport) (606 for me). This means that the position of the top of the viewport plus the height of the window is the position of bottom of the viewport. 1385 + 606 = 1991.
The scrollTop value will never be as high as the document height value. That would mean that you scrolled past the document so that it's all outside the window.
Comparing scrollTop to the window height would only mean that you have scrolled one screen down, not to the bottom of the document.
Subtracting the window height from the document height gives you the value where scrollTop will be, when the bottom of the window is at the bottom of the document.
Related
I have a function where I enable scrolling only to for the difference of the div height and window height, so that it doesn't scroll down from the point where div ends.
But that is not what I want, because if I resize the screen to smaller size, user is not able to scroll all the way down to the end of that particular div. How can I modify this so that I enable scrolling to the point where the div is visible and only to that point and not over it?
scrollPoint = $(".magazine-section").offset().top - $(window).height();
$(window).scroll(function() {
$(window).scrollTop() > scrollPoint ? $(window).scrollTop(scrollPoint) : '';
}).scroll();
You need to set scrollPoint again when the window is resized using $(window).resize().
$(window).resize(function() {
scrollPoint = $(".magazine-section").offset().top - $(window).height();
}
How do you detect top of an element is near of the bottom of browser with jQuery?
when I scroll down, if bottom of browser reach to top of an specal div,it alert me, and when I scroll up and bottom of browser reach to the top of that div,alert me again?
something like this website when scroll it down or up. (jquery effect)
I think you looking for this. you can do this using below code.
var ScrollBottom = 100;
if ($(window).scrollTop() + $(window).height() >
$(document).height() - ScrollBottom) {
// your ajax call here
}
I wish to check if my current element is in view or not. I use this condition to check that:
if ($(window).scrollTop() > $('.element').offset().top) {
//show
}
But problem is that $(window).scrollTop() is giving different results on different browser height (I'm using FireFox, first number is .scrollTop(), second - .offset().top):
now I just reduce height of firebug (so scroll bar is decreased in size):
So I can't use $(window).scrollTop() to get how mush I have scrolled in page.
Any other way how to define if element is in view?
You will need to consider these 4 base values:
Window's height
Window's scroll top
Element's offset top
Element's height
Based on that, you will have:
var windowHeight = $(window).height();
var windowScrollTop = $(window).scrollTop();
var elementHeight = $(".element").height();
var elementOffsetTop = $(".element").offset().top;
if ((elementOffsetTop <= windowScrollTop + windowHeight) && (elementOffsetTop + elementHeight >= windowScrollTop))
console.log('Visible on viewport');
Note that with this algorithm, you will be able to check if the element is visible on the viewport, independent of its height, and most importantly, considering the case when you scroll the window beyond the element.
It will say that the element is visible when the highest part or the lowest part of the element is shown on viewport.
I'm trying to detect when my user has scrolled to the point just before he sees the first pixel of the footer.
Here is how I'm trying to calculate the position just before the footer:
footerVisible = $(document).height() - $(window).height() - $('footer').height() - 1;
alert(footerVisible);
I'm taking the height of the whole document and subtracting the viewport height and the height of the footer.
This alerts me 3695.
Now I'm logging the scroll position like this:
$window.scroll(function(e){
console.log($window.scrollTop());
}
When scrolling all the way to the bottom of the document (ie: seeing the full footer and end of document) the console indicates I'm at position 3211.
My logic is clearly flawed somewhere...
How can I calculate the 'scrollTop' position that the user will be on just before he sees the first pixel of the footer.
Can anyone provide a fiddle that throws an alert juste before the user sees the footer?
EDIT
Fiddle available here
To see the "first pixel of the footer", the scroll position will have to be one pixel less from one window height from the height of the footer.
var footerVisible = $(document).height() - $(window).height() - $('footer').height() - 1;
Your scroll function should be something like this:
$(window).scroll(function() {
if( $(window).scrollTop() >= footerVisible ) {
alert('Footer Visible');
}
});
I have the below function set in place to fade out/in certain content based on its proximity to the top/bottom of the page. The desired effect is pretty visible and obvious if you click on the ABOUT link on the top, but if you use the WORK button to scroll down the content just pops in at the right position but the fading does not occur as it does with the top.
I'm sure it has something to do with the scrollBottom equivalent I've created but not sure how to go about fixing this
http://coreytegeler.com/new
$(window).load(function(){
$(window).scroll(function() {
var st = $(window).scrollTop();
var sb = $(document).height() - $(window).height() - $(window).scrollTop();
$('#about .content').css({'opacity' : (1 - st/450)});
$('#work .content').css({'opacity' : (450 + sb*-1)});
$('#home .content').css({'opacity' : (-(450 + sb*-1))});
$('#home .content').css({'opacity' : (-(1 - st/450))});
});
});
In my browser, your page loaded with a document height of 2892 and a window height of 952. Plugging those dimensions into your equations gives the opacity of #work varying from -1478 to 450. This has it starting to display when the window is 450px from the bottom, fully fading in when the window is 451px from the bottom - probably a little faster than you intended.
If you change the work line to
$('#work .content').css({'opacity' : ((450 + sb*-1)/450)});
then your opacity will vary from -3.28 to 1, crossing 0 and starting to fade in when the window has scrolled to 450px from the bottom, reaching 1.00 (100% fade in) when the window has scrolled all the way down.