Develop Reference

How can I improve this sticky footer code & fix one minor issue?

For some reason you need to drag the window in jsfiddle to get it going, but it works fine onLoad in context.
The idea behind this is that if the content exceeds the height of the window, it will removeClass ".sticky" which is slamming the footer down absolute to the bottom of the page. Otherwise, it's a sticky footer.
It should be pretty elegant. My issue is that for a moment, the footer clips off the content. I want it to removeClass ".sticky" when the aqua background of the section[role="main"] meets the footer's purple background and not a pixel later. I can't seem to get this going.
The footer is always the same height... can I just subtract it from something?
$(document).ready(function(){
$('aside[role="sidebar"]').height($(window).height());
if( $('section[role="main"]').height() >= $(window).height() ) {
$('.footer').removeClass('sticky');
}
$(window).resize(function(){
$('aside[role="sidebar"]').height($(window).height());
if( $('section[role="main"]').height() <= $(window).height() ) {
$('.footer').addClass('sticky');
}
else {
$('.footer').removeClass('sticky');
}
});
});
Working example here:
http://jsfiddle.net/LxvQ9/ make sure to resize to get it going initallly. Again, this is some issue with jsFiddle. Works fine on my site onLoad.
Thanks for any help.

While calculating height of any element, we also need to consider padding and border if any.
In jQuery we use outerHeight to get the height of any element including padding and border.
So, in your case, we are using only height and that's why some text is clipping.
Use the following code to properly calculate the height and update the footer class.
JavaScript Code
$(function(){
//When Window is Resized
$(window).resize(makeFooterSticky);
//Run once on page load
mkaeFooterSticky();
});
function makeFooterSticky() {
$('aside[role="sidebar"]').height($(window).height());
if( $('section[role="main"]').outerHeight() <= $(window).height() - $('.footer').outerHeight() ) {
$('.footer').addClass('sticky');
} else {
$('.footer').removeClass('sticky');
}
}
Hope this should work.
Let me know if there are any issues.
JSFiddle Demo : http://jsfiddle.net/hVzat/3/

window scroll method flickers in IE

This may come as a huge surprise to some people but I am having an issue with the IE browser when I am using the $(window).scroll method.
My goal:
I would like to have the menu located on the left retain it's position until the scroll reaches > y value. It will then fix itself to the top of the page until the scroll returns to a < y value.
My error:
Everything seems just fine in Chrome and Firefox but when I go to Internet Explorer it would seem the browser is moving #scroller every time the scroll value changes, this is causing a moving/flickering event.
If someone could point me to a resource or give me a workaround for this I would be very grateful!
Here is a fiddle:
http://jsfiddle.net/CampbeII/nLK7j/
Here is a link to the site in dev:
http://squ4reone.com/domains/ottawakaraoke/Squ4reone/responsive/index.php
My script:
$(window).scroll(function () {
var navigation = $(window).scrollTop();
if (navigation > 400) {
$('#scroller').css('top',navigation - 220);
} else {
$('#scroller').css('top',183);
$('#scroller').css('position','relative');
}
});

You might want to take a look at the jQuery Waypoints plugin, it lets you do sticky elements like this and a lot more.
If you want to stick with your current method, like the other answers have indicated you should toggle fixed positioning instead of updating the .top attribute in every scroll event. However, I would also introduce a flag to track whether or not it is currently stuck, this way you are only updating the position and top attributes when it actually make the transition instead of every scroll event. Interacting with the DOM is computationally expensive, this will take a lot of load off of the layout engine and should make things even smoother.
http://jsfiddle.net/WYNcj/6/
$(function () {
var stuck = false,
stickAt = $('#scroller').offset().top;
$(window).scroll(function () {
var scrollTop = $(window).scrollTop();
if (!stuck && scrollTop > stickAt) {
$('#scroller').css('top', 0);
$('#scroller').css('position','fixed');
stuck = true;
} else if (stuck && scrollTop < stickAt) {
$('#scroller').css('top', stickAt);
$('#scroller').css('position','absolute');
stuck = false;
}
});
});
Update
Switching the #scroller from relative to fixed removes it from the normal flow of the page, this can have unintended consequences for the layout as it re-flows without the missing block. If you change #scroller to use an absolute position it will be removed from the normal flow and will no longer cause these side-effects. I've updated the above example and the linked jsfiddle to reflect the changes to the JS/CSS.
I also changed the way that stickAt is calculated as well, it uses .offset() to find the exact position of the top of #scoller instead of relying on the CSS top value.

Instead of setting the top distance at each scroll event, please consider only switching between a fixed position and an absolute or relative position.All browsers will appreciate and Especially IE.
So you still listen to scroll but you now keep a state flag out of the scroll handler and simply evaluate if it has to switch between display types.
That is so much more optimized and IE likes it.

I can get flickers in Chrome as well if I scroll very quickly. Instead of updating the top position on scroll, instead used the fixed position for your element once the page has scrolled below the threshold. Take a look at the updated fiddle: http://jsfiddle.net/nLK7j/2/

Jquery Sticky Nav Issue

I'm been trying to get my head around issue and seem to cant find some help.
http://fiddle.jshell.net/DQgkE/7/show/
The experience is a bit jumpy and buggy now- but what i will like is
1) When you scroll down the page. I want the Sticky Nav to be (disable,dropped off, stop) at a specific location(chapter-3) on the page and the user should have the ability to keep scrolling down.
2) When the user is scrolling back up, the code will stick the nav back and carry it up until the nav reaches the original position at the top.
Below is a starting point.
3) Currently is kinda of doing that but there's some huge jump going on when scrolling back up
http://imakewebthings.com/jquery-waypoints/#doc-disable
using disable, destroy, enable option will be nice.
This is a original experience cleaned: http://fiddle.jshell.net/DQgkE/1/show/
Thanks for the help in Advance.

I'm not sure how this plugin you used work, but I have a solution I wrote a while back that I wrote in jquery. It has few variables at the top, the item you wanted sticky, the item where you want it to stop, and the class to add when it becomes sticky and padding at the top and bottom. I only modified the javascript portion in this fork.
EDIT
I went ahead and fixed the original code. Solution without waypoint plugin is in comments.
Here is the result:
http://fiddle.jshell.net/Taks7/show/

I would recommend to use jQuery (that was a surprise, right?! :P)
$(document).ready(function() { //when document is ready
var topDist = $("nav").position(); //save the position of your navbar !Don't create that variable inside the scroll function!
$(document).scroll(function () { //every time users scrolls the page
var scroll = $(this).scrollTop(); //get the distance of the current scroll from the top of the window
if (scroll > topDist.top - *distance_nav_from_top*) { //user goes to the trigger position
$('nav').css({position:"fixed", width: "100%", top:"*distance_nav_from_top*"}); //set the effect
} else { //window is on top position, reaches trigger position from bottom-to-top scrolling
$('nav').css({position:"static", width:"initial", top:"initial"}); //set them with the values you used before scrolling
}
});
});
I really hope I helped!

Detect Fixed position JavaScript not working in IE

i use YS for fixed position menu, is working fine in firefox but not working in IE.
$(function(){ // this is the shorthand for document.ready
$(document).scroll(function(){ // this is the scroll event for the document
scrolltop = $(document).scrollTop(); // by this we get the value of the scrolltop ie how much scroll has been don by user
if(parseInt(scrolltop) >= 80) // check if the scroll value is equal to the top of navigation
{
$("#navbar").css({"position":"fixed","top":"0"}); // is yes then make the position fixed to top 0
}
else
{
$("#navbar").css({"position":"absolute","top":"80px"}); // if no then make the position to absolute and set it to 80
}
}
}
Any solution fixing this problem for ie?

The problem, to me seems to be that IE doesn't trigger the .scroll event. At least, not in jsfiddle. If you explicitly trigger the event, that does seem to fix things. this fiddle was tested in IE8 and it works. The code:
$(function()
{
$(document).scroll(function()
{//add var here, avoid evil globals:
var scrolltop = $(document).scrollTop();
if(parseInt(scrolltop) >= 80)
{
$("#navbar").css({"position":"fixed","top":"0"});
}
else
{
$("#navbar").css({"position":"absolute","top":"80px"});
}
});//close properly
$(document).scroll();//explicit call
});//close this, too

You are missing ')' in your code working jsfiddle (tested in IE7 and IE9)
$(function(){ // this is the shorthand for document.ready
$(window).scroll(function(){ // this is the scroll event for the document
scrolltop = $(window).scrollTop(); // by this we get the value of the scrolltop ie how much scroll has been don by user
if(parseInt(scrolltop) >= 80) // check if the scroll value is equal to the top of navigation
{
$("#navbar").css({"position":"fixed","top":"0"}); // is yes then make the position fixed to top 0
}
else
{
$("#navbar").css({"position":"absolute","top":"80px"}); // if no then make the position to absolute and set it to 80
}
}); //here
});//here

For position fix must your parent element has this style
position:relative;
best regards

Finding the position of scroll bar using javascript

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
}