Maria N Maria N - 18 days ago 7
Javascript Question

jQuery offset top navbar

I've got code for smooth scrolling:

$(window).scroll(function() {
if ($(".nav").offset().top > 150) {
$(".nav-fixed-top").addClass("top-nav-collapse");
} else {
$(".nav-fixed-top").removeClass("top-nav-collapse");
}
});


$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});


but after scrolling titles of section are hidden
I need to move it sth about 100px top? i tried:

scrollTop: $($anchor.attr('href')).offset().top-100


or

scrollTop: $($anchor.attr('href')).offset({top: -100}).top


but this not work correctly :/

Answer

You need to add 100 to the top offset because its 0

nav-fixed {
    position:fixed;
    top:0;
} 

Try this:

$('html, body').stop().animate({
    scrollTop: $(".nav").offset().top + 100
}, 1500, 'easeInOutExpo');

You can check the values your variables with

console.log($($anchor.attr('href')).offset().top);

happy coding!