Develop Reference

Update: Add more control: hide header on scroll and work from a certain width size

Updated this question again:
I have an existing script which works, but the only thing that I would like to have more control on is specifying the tolerance for up/down scroll and when it shows or hides the menu. Currently, the menu slides up at first after scrolling 44px (delta value)--which is OK--but after that, I would like the menu to scroll up or down directly on scroll. When you set the delta value to 0px you can see what i mean, but than it doesn't have the delay at the first scroll (understand it?).
Second thing is that i would like to add a function to the script that will let me control from which width it will start to work. I want it to work from 667px and downwards and not work when it is more than that value (some what like a media query).
JSFiddle
// Hide header on scroll down //
var didScroll;
var lastScrollTop = 0;
var delta = 44;
var navbarHeight = $('header').outerHeight();
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$('header').addClass('nav-up');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('header').removeClass('nav-up');
}
}
lastScrollTop = st;
}

Two questions / two answers:
but after that I would like the menu to scroll up or down directly on scroll
set delta to 0
Also what is the 250 value? Can't seem to see what it does?
250 is the interval of the check if the user scrolled

jQuery height doesn't equal scrollTop

In my jquery I am trying to calculate when the scrollbar is 100px from the bottom, and when it gets there I will do an ajax query (for now I am doing an alert as you can see).
$(document).on("scroll", function(e){
var scrollHeight = $(document).height();
var offset = $(document).scrollTop();
console.log(scrollHeight);
console.log(offset);
if(scrollHeight - offset <= 100){
alert("here");
}
});
For some reason that I can not figure out it doesn't work. If I scroll to the bottom I would assume that the height() would equal scrollTop() but it doesn't, and here is what it shows:
scrollHeight = 1923
offset = 998
Am I using the wrong methods for this?

You need to add the height of the window with scrollTop. Link
$(document).on('scroll', function () {
var docHeight = $(document).height(),
scrollTop = $(document).scrollTop(),
windowHeight = $(window).height();
if (docHeight - (scrollTop + windowHeight) <= 100) {
alert(docHeight - (scrollTop + windowHeight));
}
});

Looks like you might be forgetting to subtract the pane's view-able height. I've done something similar in my code here:
var scrollPos = $('#viewable-div').height() - $('#scrolling-content').height();
if ($("#scrolling-content").scrollTop() > (scrollPos - 100)) {
//load more
}

When you scroll the element all the way down, scrollHeight should be equal to scrollTop + clientHeight.
If the element has no scrollbars scrollWidth/Height should be equal to clientWidth/Height.
• When the element has no scrollbars IE makes the scrollHeight equal to the actual height of the content; and not the height of the element. scrollWidth is correct, except in IE8, where it’s 5 pixels off.
• Opera gives odd, incorrect values.

You can use a statement like this
((container.scrollTop() + container.height() + detectionOffset) >=
container.get(0).scrollHeight)
Where container could be the document.body and detectionOffset would be 100

This has been answered a few times before, including here
One piece of code that I'm using and is always working (even on Opera) is this:
$(window).on("scroll", function () {
var scrollHeight = $(document).height();
var scrollPosition = $(window).height() + $(window).scrollTop();
if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
/* Do something */
}
});

Animate element on scroll

I would like to animate a div when user scrolls the page.
For that, i implemented this code:
var slide = jQuery(".apresentacao-spc-01");
var opening = false;
var closing = false;
var pos = jQuery(window).scrollTop();
jQuery(window).scroll(function() {
var pos = jQuery(window).scrollTop();
console.log(pos);
if (pos > 100) {
if (!opening) {
opening = true; closing = false;
slide.stop().animate({
'opacity': 1,
'margin-left': '0px'
}, 700, function() {
opening = false;
});
}
} else {
if (!closing) {
closing = true; opening = false;
slide.stop().animate({
'opacity': 0,
'margin-left': '-1000px'
}, 500, function() {
closing = false;
});
}
}
});
The issue is:
Using "if (pos > 100) {", if the user resolution is big enough to show the element before he needs to scroll, he won't see the element unless he begins to scroll the page.
My question is:
How can I get a scroll animation that will be executed when the element is visible?
I mean: If the element is visible on page load, the animation automatically starts... If the element is not visible on page load, the animation waits the scroll reach the element to start...
Thanks.

There a few different things you could do. My first thought was to query the height of the viewport with something like this:
var viewportWidth = document.documentElement.clientWidth
, viewportHeight = document.documentElement.clientHeight
And then trigger the animation if it is taller than the distance the element is down.
A more dynamic solution would be to use a function that checks to see if the element is in viewport the automatically, that way you wouldn't need to worry about adjusting the height if you changed stuff on your page:
function isElementInViewport (el) {
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
);
}
credit to this response.
There is a use guide and further information in the link provided.
Good luck!

How to determine if you have scrolled to the bottom of an element?

How will you determine if you have reached the bottom of an element? For instance you have a div with a height of 2000px, then the viewport is only 600px tall. With these in place, how will you know how much scroll value you need to know if it's already the bottom of the 2000px div?

You can use something like this:
var $element = $('div');
$(window).scroll(function() {
var scroll = $(window).scrollTop() + $(window).height();
var offset = $element.offset().top + $element.height();
if (scroll > offset) {
$element.css('background', 'blue');
} else {
$element.css('background', 'red');
}
});
Demo: http://jsfiddle.net/eNjEs/5/

Jquery follow scroll

I have a sort of sidebar on my website, which has to scroll down together with the user so that it is always in the view.
The code I'm using now is actually working fine however there is one problem. On smaller screens the sidebar scrolls before your at the sidebar thus making it impossible to see it all even if you scroll.
So what I want is the sidebar to scroll with the bottom instead of it being pushed down with the top so that when you reach the end of the sidebar it starts to scroll.
This is the code that I'm currently using.
var documentHeight = 0;
var topPadding = 10;
$(function() {
var offset = $("#mainright").offset();
documentHeight = $(document).height();
$(window).scroll(function() {
var sideBarHeight = $("#mainright").height();
if ($(window).scrollTop() > offset.top) {
var newPosition = ($(window).scrollTop() - offset.top) + topPadding;
var maxPosition = documentHeight - (sideBarHeight);
if (newPosition > maxPosition) {
newPosition = maxPosition;
}
$("#mainright").stop().animate({
marginTop: newPosition
});
} else {
$("#mainright").stop().animate({
marginTop: 0
});
};
});
});

I guess the "best practice" for accomplishing a task like this is to use dynamically changing css position from absolute to fixed and vice versa. A basic example could look like:
$(function(){
var $box = $('.box'),
offset = $box.offset(),
doc_h = $(document).height();
$(window).scroll(function(){
if($(window).scrollTop() > offset.top) {
if(!$box.hasClass('fix'))
$box.toggleClass('normal fix');
}
else{
if(!$box.hasClass('normal'))
$box.toggleClass('normal fix');
}
});
});​
Example in action: http://www.jsfiddle.net/YjC6y/14/

$(function() {
var top = 50;
$(window).scroll(function() {
$('#box').stop().animate({ top: $(window).scrollTop() + top}, 1000);
});
});
Try the example : http://jsbin.com/omiyi3

I think you can instead make the sidebar responsive by throwing your function into one of these:
if (responsive_viewport >= 768) {}
This makes it so that the function will only load if the viewport is bigger than or equal to 768px.