Develop Reference

jQuery get current view position from top

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.

How to update a jQuery variable before retrieving it

I've written a very simple jQuery script for a responsive site that allows the topnav to become "sticky" when scrolling past its location. (You can see it working here.) It also adds/removes the height of the stickynav to/from the top-margin of the body and another element to remove the sudden jump when the menu becomes fixed. This is the code:
$(document).ready(function() {
var theLoc = $('nav#menu').position().top;
var navHeight = $('nav#menu').height();
$(window).scroll(function() {
if(theLoc >= $(window).scrollTop()) {
if($('nav#menu').hasClass('fixed')) {
$('nav#menu').removeClass('fixed');
$('body').css('margin-top', '0');
$('nav#hidden-menu').css('margin-top', '0');
}
} else {
if(!$('nav#menu').hasClass('fixed')) {
$('nav#menu').addClass('fixed');
$('body').css('margin-top', navHeight);
$('nav#hidden-menu').css('margin-top', -navHeight);
}
}
});
});
The problem is that the height of the stickynav changes depending on the size of the window. (It's completely absent at less than 768px wide, small from 768 - 1280, and larger at 1280 and wider.) However, the navHeight variable retains the same value as when the page first loaded—so if you load the page, resize the window so that the nav height changes, and then scroll down past the nav, the script no longer works as intended.
How would I write this in such a way that the navHeight variable updates when the window is resized? I tried putting the var declaration directly before it's called for in the script, hoping that it would update the value whenever it's called, but this didn't work.

Add a window resize handler that updates the value of navHeight.
Example:
$(document).ready(function() {
var theLoc = $('nav#menu').position().top;
var navHeight = $('nav#menu').height();
...
$(window).resize(function() {
navHeight = $('nav#menu').height();
});
});

Add class once user scrolls down?

I'm designing a vertical scroll website where each page is a 105% tall div.
I'm having a bit of trouble getting Javascript to slap a class on a div once the user scrolls down.
The div in question is on the second page, so around 170% from the top. So far I have this:
$(window).scroll(function() {
var height = $(window).scrollTop();
var q = 1.7;
if(height >= q) {
$(window).off("scroll");
$('#A2').addClass('animated bounceIn');
}
});
Unfortunately, it doesn't seem to be working.

Nothing wrong with your script here: http://jsbin.com/dixuqoku/1/edit
To compare to 170% of the viewport height, you could just multiply the viewport height with 1.7:
var oneSeventy = $(window).height() * 1.7;

Detecting when user has scrolled to the pixel just before seeing the footer

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');
}
});

'Endless scroll' in a div on a web page

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';
}