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.
Related
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'm having trouble getting an element to animate at the correct time - ie, when it first comes into view on different sized viewports.
The code is:
<script>
$(window).scroll(function() {
$('.sright3').each(function(){
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow+500) {
$(this).addClass("slideRight");
}
});
});
</script>
This triggers the animation by adding class .slideright to the .sright3 element when it reaches 500 pixels below the top of the window. (topOfWindow+500) - the problem is that on different sized viewports, the element will either start animating too soon or only animate once it's half way up the screen.
Is there a way to define "bottom of window - 100" or "top of window + 95% of window height"?
Thanks for the help!
I want to create a div containing endless scrollable content in a page.
For recognizing the end of the scrollable content in order to load more data from the data base I've written the following:
$(window).scroll(function(){
var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
var scrolltrigger = 0.95;
if ((wintop/(docheight-winheight)) > scrolltrigger) {
lastAddedLiveFunc();
}
});
Question: The following code is for creating the endless scroll which fits in the entire webpage, but how can I write the same for a 'div' inside a web page?
(Hint: An exact similar thing is the Ticker on Facebook, on the right side which shows the recent activities of your friends in real time.)
The principle is the exact same. The div will be your browser viewport, and the div content is your document. You just need to exchange
$(window).scroll() --> $("#someDiv").scroll()
$(window).scrollTop() --> $("#someDiv").scrollTop()
$(document).height() --> $("#someDiv")[0].scrollHeight
$(window).height() --> $("#someDiv").height()
and it should work.
Note that:
scrollHeight is a property, not a function.
scrollHeight isn't jQuery, so you need to obtain it from the actual javascript element of the selector, hence the [0] addition. Another way is to use $("#someDiv").prop("scrollHeight").
$("#yourdiv").scroll(function(){
//your logic
}
You can use your div instead of window
For example
$('#yourdiv').scrollTop() // etc
use this
// get box div position
var box = document.getElementById('box').offsetTop;
window.onscroll = function(){
// get current scroll position
var scroll_top = document.body.scrollTop || document.documentElement.scrollTop;
document.getElementById('scbox').innerText = scroll_top + ' ' + box;
// if current scroll position >= box div position then box position fixed
if(scroll_top >= box)
document.getElementById('box').style.position = 'fixed';
else
document.getElementById('box').style.position = 'relative';
}
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.
I need to hint my user that there are some useful results on next page as soon as he crosses half of the width of my webpage(home). For this, I wish to know the exact position of the scroll bar , so , that as soon as the position of the scroll bar goes after 50% , I can trigger some javascript function to do the same.
I have encircled the scroll bar in the picture whose position, I have to find out
Also, if we can't find out the position of scroll bar, please tell me some alternate method to do the same !
Thanks !!
You can't find the position of the scrollbar since it's not a part of the DOM but what you can do is determine the position. Since I don't know how to do it with vanilla JavaScript I'll give you a jQuery example:
var scrollTop = $("body").scrollTop(); // pixels scrolled from top
var documentHeight = $(document).height(); // the height of the document
if(scrollTop >= documentHeight / 2){
// 50%+ scrolled
}