Auf klebriger Überschrift stecken

Ich habe versucht herauszufinden, wie dies für ein paar Stunden getan wird, und bin nicht näher als, als ich anfing.Auf klebriger Überschrift stecken

<div class="container"> 
    <div class="fixed-top-bar"></div> 
    <div class="scrolling-bottom-bar"></div> 
</div>

Es gibt 3 Bits zu was ich versuche zu tun.

Die fixed-top-bar ist immer fixed (leicht natürlich)

Die scrolling-bottom-bar sitzt zunächst unter dem fixed-top-bar (wieder leicht durch nur eine Offset wie ein oberer Rand hinzufügen).

Aber hier ist das Bit, mit dem ich feststecke. Die container (oder der unterste Teil des Designs) hat einen Schatten an der Unterseite, um anzuzeigen, dass es erhöht ist. Anfangs sitzt dieser Schatten unterhalb der scrolling-lower-bar, aber da dieser nicht mehr sichtbar ist, bleibt der Schatten an der festen oberen Leiste haften.

Ich bin nicht sicher, ob dies mit html/css getan werden kann, oder es braucht ein bisschen js. Hier ein Beispiel zur Veranschaulichung, das illustrierte, was ich versucht habe zu replizieren.

example

Quelle

2016-09-21 John Ohara

mir noch unklar verwenden, ich nicht bekommen, was Sie aus dem Beispiel wollen –

Ihre Stile mit diesem Zusatz. – Mani

@ CeylanMumunKocabaş - Sie werden sehen, dass die Kopfzeile einen Schatten am unteren Rand hat - wenn die Seite scrollt, bewegt sich der Schatten nach oben, bis der untere Teil nicht mehr sichtbar ist - aber der Schatten bleibt immer noch fest an der Yop-Leiste. –

Sie müssen Javascript so etwas verwenden:

$(window).scroll(function() {  
    var scroll = $(window).scrollTop(); 
    if (scroll > 0) {// you can add the height of your header 
     $(".fixd-top").addClass("active"); 
    } 
    else { 
     $(".fixd-top").removeClass("active"); 
    } 
}); 




    CSS 

    .fixed-top.active { 
     box-shadow: 0 0 10px rgba(0,0,0,0.4); 
    }

Quelle

2016-09-21 08:38:45

Wenn Sie den Quellcode mit Inspektor (f12) überprüfen, werden Sie sehen, wenn Sie die CSS-Änderung in einige nach unten scrollen, Element. Diese Änderung muss etwas JavaScript-Code, der angezeigt wird, wenn der Benutzer nach unten scrollen.

Quelle

2016-09-21 08:40:23

versuchen Sie die scrollTop Eigenschaft, um das vertikale Scrollen zu überprüfen, ist die gleiche Eigenschaft in Jquery.

oder Sie können eine bereits geschriebene Bibliothek wie die Bootstrap Affix oder ScrollToFixed

Quelle

2016-09-21 08:41:16

Auf klebriger Überschrift stecken

Antwort

Verwandte Themen