
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.