Shrinking header code aanpassing
Ik heb een header die fixed is en shrinked en achtergrondkleur krijgt bij het scrollen. Alleen als de pagina reload dan is de styling weg. Hoe kan ik ervoor zorgen dat de styling ook nog blijft toegepast na reload?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
jQuery(function( $ ){
$(".site-header").after('<div class="bumper"></div>');
$(window).scroll(function () {
if ($(document).scrollTop() > 50 ) {
$('.site-header').addClass('shrink');
} else {
$('.site-header').removeClass('shrink');
}
});
});
$(".site-header").after('<div class="bumper"></div>');
$(window).scroll(function () {
if ($(document).scrollTop() > 50 ) {
$('.site-header').addClass('shrink');
} else {
$('.site-header').removeClass('shrink');
}
});
});
Ik had dit bericht gevonden, maar hoe moet ik dat nou toepassen, want krijg het niet werkende op een of andere manier.
Code (php)
1
$(window).on('load scroll resize orientationchange', function () {
Voorbeeldje (reload werkt hier helaas niet maar resize en scroll wel):
https://jsfiddle.net/8yho6ezf/
Simpele work-around is om de boel in een platte HTML pagina te zetten en lokaal te laden, de site-content div zou hoog genoeg moeten zijn voor schermen van 1080p en kleiner.
Ik bedoelde inderdaad F5 refresh
Maar de code in the fiddle werkt inderdaad. Het is nu opgelost :) Geen problemen meer.