- This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
Viewing 5 posts - 1 through 5 (of 5 total)
- The forum ‘JavaScript’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › JavaScript › issue with sticky navigation
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 :)
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’);
}
});
});
nope… same result…the navigation become fixed with scroll up and it remains fixed :(
please excuse my bad english
link?
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’);
}
});