Sticky Header mit Smooth Scroll

Im "Eigenen JavaScript-Code" platziert man:

<script>
//Sticky Header
jQuery(document).ready(function($) {

    function sticky()
    {
        var window_top=$(window).scrollTop();
        var top_position=$('body').offset().top;
        var element_to_stick=$('#header');
        
        if (window_top > top_position) {
            element_to_stick.addClass('sticky');
        } else {
            element_to_stick.removeClass('sticky');
        }
    }
    $(window).scroll(sticky);
    sticky();
    
});
</script>

<script>
  //Smooth Scrolling
  $('a[href*="#"]').on('click', function(e){
    $('html,body').animate({
      scrollTop: $($(this).attr('href')).offset().top - 200
    },500);
    e.preventDefault();
  });

</script>

JQuery laden nicht vergessen. Der Header bekommt beim Scrollen die Klasse "sticky" die man im CSS mit fixed festtackern kann.

Beim Smooth Scroll kann man durch anpassen des Wertes ...top - 200 }... den Abstand beeinflussen, der beim Scroll verwendet wird. Durch den Sticky Header wird nämlich zu weit gescrollt und man muss es ausgleichen.

Zurück