issue with sticky navigation

[sameera]

hello :)

i am trying to build a sticky navigation using css and jqury. i am using following code block

$(window).scroll(function() {
var navheight = $(‘.site-navigation’).offset().top;
if ($(window).scrollTop() >= navheight) {
$(‘.site-navigation’).addClass(‘fixed-site-navigation’);
}
if ($(window).scrollTop() < navheight) {
$(‘.fixed-site-navigation’).removeClass(‘fixed-site-navigation’);
}
});

when i scroll up the navigation becomes fixed but when i scroll down the class that has been added is not removing. the navigation still remains fixed. Please help me to find the issue :)

[wolfcry911]

Try this:

$(function () {
var top = $(‘.site-navigation’).offset().top;
$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that’s below the element
if (y >= top) {
// if so, add the fixed class
$(‘.site-navigation’).addClass(‘fixed’);
} else {
// otherwise remove it
$(‘.site-navigation’).removeClass(‘fixed’);
}
});
});

[sameera]

nope… same result…the navigation become fixed with scroll up and it remains fixed :(

please excuse my bad english

[wolfcry911]

link?

[sameera]

i found a solution.. Thanks for trying to help :)

$(window).scroll(function() {
var navheight = $(‘window’).height();
if ($(window).scrollTop() >= navheight) {
$(‘.site-navigation’).addClass(‘fixed’);
}
if ($(window).scrollTop() < navheight) {
$(‘.site-navigation’).removeClass(‘fixed’);
}
});

[Author]

Posts