Smooth scroll + sticky header für Höhenänderung?

Question

Ich habe einen Navigationsbereich, der sich in einen sticky header verwandelt, sobald Sie daran vorbeirollen, und ich habe auch eine glatte Scroll-Funktion, um die Seite zu bestimmten Abschnitten zu scrollen, wenn Sie auf verschiedene Links klicken. Das Problem, das ich habe, ist, dass wenn Sie auf einen der Links klicken, bevor die Navigation sticky wird, die Seite zu weit über den Abschnitt scrollt, da der Offset die Anfangshöhe der Navigation lieber als die sticky Höhe verwendet. Das Gleiche passiert auch in der entgegengesetzten Richtung. Wenn Sie auf den Link zum ersten Abschnitt klicken, wird zu weit nach oben gerollt, da die Höhe des sticky nav als Offset verwendet wird. Gibt es eine einfache Lösung dafür?

$(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(); 
    }); 
}); 

JSFiddle example

Answer 1

Sie könnten in der Lage sein, die ‚klebrig‘ Klasse dem nav nur hinzufügen, wenn der Benutzer auf ein Element klickt.

$(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(); 
    }); 
});