Sticky Header / Javascript

Question

Good morning I am working on a sticky header for my site, I've got it working but it seems to snap into place, I want to be smooth! how do I go about this?

My site: http://www.trevorpeters.co.uk/tpwebdesign

CSS:

.sticky {  
    position: fixed;  
    width: 100%;  
    left: 0;  
    top: 0;  
    z-index: 100;  
    border-top: 0;  
}

JS

$(document).ready(function() {  
var stickyNavTop = $('.nav').offset().top;  

var stickyNav = function(){  
var scrollTop = $(window).scrollTop();  

if (scrollTop > stickyNavTop) {   
    $('.nav').addClass('sticky');  
} else {  
    $('.nav').removeClass('sticky');   
}  
};  

stickyNav();  

$(window).scroll(function() {  
    stickyNav();  
});  
});

Just imagine that you tell the .nav to have another class "sticky", which applies all these CSS rules to it immediately. You will either need a jQuery animation or CSS3 transition, depending on what "smooth" you actually want. — deb0rian
– deb0rian, Commented Nov 22, 2013 at 11:36
You don't even need Javascript for this. Give your header the sticky class right ahead. — Butt4cak3
– Butt4cak3, Commented Nov 22, 2013 at 11:38

Perry · Accepted Answer · 2013-11-22 11:41:24Z

3

By default the header is in your document flow, 'pushing' the rest of the content down. If you make it sticky, it doesn't push the rest of the document down making it snap upwards. You can fix this by making your banner sticky from the start and giving your content a top margin equal to the height of your header. This way you can just get rid of the javascript all together.

answered Nov 22, 2013 at 11:41

Perry

987 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Sticky Header / Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related