Płynna przewinięcie + lepkie nagłówki informujące o zmianie wysokości? - javascript, jquery, html, css

Mam obszar nawigacyjny, który zamienia się w lepkinagłówek po przewinięciu obok niego, a także funkcję płynnego przewijania, aby przewinąć stronę do określonych sekcji po kliknięciu różnych linków. Problem polega na tym, że jeśli klikniesz jeden z linków zanim nawigacja stanie się lepka, strona przewinie się zbyt daleko poza sekcję, ponieważ przesunięcie wykorzystuje początkową wysokość nawigacji, a nie lepką wysokość. To samo dzieje się również w przeciwnym kierunku, jeśli klikniesz na link do pierwszej sekcji, przewiniesz zbyt wysoko, ponieważ wykorzystuje wysokość lepkiej nawigacji jako przesunięcie. Czy istnieje prosty sposób rozwiązania tego problemu?

$(function() {
// Smooth scrolling
$("nav li").click(function() {
var navHeight = $("nav").height();
var section = $(this).attr("class");
var target = $("#"+section);
if (target.length) {
$("html,body").animate({
scrollTop: target.offset().top - navHeight
}, 750);
return false;
}
});

// Sticky nav
var navTop = $("nav").offset().top;
var stickyNav = function() {
var scrollTop = $(window).scrollTop();

if (scrollTop > navTop) {
$("nav").addClass("sticky");
} else {
$("nav").removeClass("sticky");
}
};
stickyNav();

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

Odpowiedzi:

Możesz być w stanie dodać klasę "sticky" do nav po kliknięciu elementu przez użytkownika.

$(function() {
// Smooth scrolling
$("nav li").click(function() {
var section = $(this).attr("class");
var target = $("#"+section);
if (target.length) {
if (target.offset().top > navTop){
$("nav").addClass("sticky");
}
var navHeight = $("nav").height();
$("html,body").animate({
scrollTop: target.offset().top - navHeight
}, 750);
return false;
}
});

// Sticky nav
var navTop = $("nav").offset().top;
var stickyNav = function() {
var scrollTop = $(window).scrollTop();

if (scrollTop > navTop) {
$("nav").addClass("sticky");
} else {
$("nav").removeClass("sticky");
}
};
stickyNav();

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