Headerbar -> Shadow wenn ScrollDown

forum
Headerbar -> Shadow wenn ScrollDown
0

(Daniel Nevoigt) #1

Eventuell wäre es eine gute Idee und würde toll aussehen, wenn wir den HeaderMenü-Shadow entfernen und erst einblenden wenn der Nutzer etwas runter scrollt.


(Daniel Nevoigt) #2

Ich habe mich für eine leichtere Variante entschieden, da ein kleiner Schatten zu Beginn besser aussieht als gar keiner.

In CSS/HTML Component: Custom Header Menu LIGHT /head:

old

//fade in/out additional nav if NOT post-page
$(window).scroll(function() {
    if ($(this).scrollTop() > 120) {
        $('.crunchify-container').fadeOut().delay( 30 );
        if (!$("body").hasClass("archetype-regular")) {
            $('.crunchify-container2').fadeIn();
        }
    }
    else {
        $('.crunchify-container2').fadeOut().delay( 30 );
        $('.crunchify-container').fadeIn();
    }
 }
);

new

//fade in/out additional nav if NOT post-page
$(window).scroll(function() {
    if ($(this).scrollTop() > 60) {
        $('.crunchify-container').fadeOut().delay( 10 );
        $('.d-header').css('box-shadow', '0 2px 4px -1px rgba(0,0,0,0.25)');
        if (!$("body").hasClass("archetype-regular")) {
            $('.crunchify-container2').fadeIn();
        }
    }
    else {
        $('.d-header').css('box-shadow', '0 1px 2px -1px rgba(0,0,0,0.25)');
        $('.crunchify-container2').fadeOut().delay( 10 );
        $('.crunchify-container').fadeIn();
    }
 }
);

In CSS/HTML General CSS Fixes + CookieConsent + Uploads -> Desktop -> CSS:

added

/* Override Box-Shadow */
.d-header {
    box-shadow: 0 1px 2px -1px rgba(0,0,0,0.25);
}

Änderungsliste - Bugfixes / Features