CSS Farbe ändern auf Scroll/Text schneiden - Überlauf Z-Index

Question

Dieser ist vielleicht ein großes Rätsel. Vielleicht ist es nicht. Ich möchte die Farbe eines position:fixed Menüs beim Scrollen ändern.

Meine erste Absicht war, zwei feste Menüs und overflow:hidden aber es tut feste Elemente arbeiten. Mein zweiter Versuch war z-index. Aber es scheint unmöglich.

Vielleicht hat jemand eine Idee?

Answer 1

Was Sie für clipping ist suchen. Dadurch können Sie eine rechteckige Region angeben, in der ein Element sichtbar ist.

können Sie verwenden:

clip: rect(auto, auto, auto, auto); 

auf dem Behälter overflow: hidden für das position: fixed Menü zu emulieren, so dass Sie den Text zuschneiden können, wie Sie blättern.

Beachten Sie, dass während clip ist veraltet, die neue clip-path nicht mit position: fixed Elemente funktioniert, so dass Sie mit clip jetzt stecken.

clip erfordert absolute oder Positionierung festgelegt, aber Sie können, indem ein position: absolute Element innerhalb eines position: relative Behälter, wie so um dieses Problem leicht zu umgehen:

<div style="position: relative;"> 
    <div style="position: absolute; clip: rect(auto, auto, auto, auto);"> 
     <!-- My awesome menu here --> 
    </div> 
</div> 

Hier ist die Demo:

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 10% 5% 80% 5%; 
 
    background-color: #eee; 
 
    font-family: sans-serif; 
 
} 
 
.container { 
 
    display: table; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #fff; 
 
} 
 
.row { 
 
    display: table-row; 
 
} 
 
.cell { 
 
    display: table-cell; 
 
    position: relative; 
 
} 
 
.cell.small { 
 
    height: 25%; 
 
} 
 
.header, 
 
.content, 
 
.footer { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    padding: 4%; 
 
    box-sizing: border-box; 
 
    clip: rect(auto, auto, auto, auto); 
 
} 
 
.header, 
 
.footer { 
 
    background-color: #F97D9F; 
 
} 
 
.menu { 
 
    position: fixed; 
 
    font-size: 2em; 
 
    top: 10%; 
 
    right: 20%; 
 
} 
 
.white { 
 
    color: #fff; 
 
} 
 
.black {}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="cell small"> 
 
     <div class="header"> 
 
     content 
 
     <div class="menu white">MENU</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="cell"> 
 
     <div class="content"> 
 
     content 
 
     <div class="menu black">MENU</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="cell small"> 
 
     <div class="footer"> 
 
     content 
 
     <div class="menu white">MENU</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Das von Ihnen gesuchte Verhalten ist das gleiche wie background-attachement:fixed;.

Obwohl diese Lösung ziemlich einfach ist und nicht auf JS basiert, sollte sie aus semantischer Sicht nicht empfohlen werden.

Der Punkt ist, 2 Hintergrundbilder mit background-attachement: fixed; zu verwenden und den Link über ihnen für die Interaktion zu positionieren. Es wird Ihnen das gewünschte Verhalten mit einer glatten Farbänderung nach der Hintergrundfarbe:

DEMO

header, article,footer,body{ 
 
    background:#fff url('http://i.imgur.com/oHIZBHL.png') no-repeat; 
 
    background-attachment: fixed; 
 
    background-position:right 160px top 10px; 
 
} 
 
body{ 
 
    padding:0 150px 1000px; 
 
    background-color:lightgrey; 
 
} 
 
header,footer{ 
 
    background-image:url('http://i.imgur.com/79IWeQK.png'); 
 
    background-color:#F97D9F; 
 
    height:125px; 
 
} 
 
article{ 
 
    height:500px; 
 
} 
 
nav a{ 
 
    position:fixed; 
 
    top:10px; right:160px; 
 
    width:150px; height:50px; 
 
}

<nav><a href="#" title="menu"></a></nav> 
 
<header></header> 
 
<article></article> 
 
<footer></footer>

Answer 3

EDIT: bewiesen, dass es nicht auf Firefox funktioniert, so Wahrscheinlich ist das nur eine seltsame Sache von Chrome, immer noch ein interessantes Verhalten, also werde ich diese Antwort hinterlassen, wenn jemand nur eine reine Chrome-Implementierung erstellen möchte oder wenn Firefox und andere Browser mitkommen.

Dort habe ich "feste" es (pun intended :))

Schauen Sie sich das Arbeits Geige: JSFiddle example of fixed, relative and overflow working together

Sie relative Eltern mit overflow verwenden können, um die Wirkung der wechselnden Farben zu imitieren .

Downside: Sie müssen Ihr Menü duplizieren (das ist semantisch gut, einfach falsch). Sie könnten einige grundlegende Javascript verwenden, um die Duplizierung des Menüs zu tun, das würde es ein wenig verbessern. Ich habe das auch nur auf Chrome getestet, aber es scheint wirklich einfaches CSS zu sein, also stelle ich mir vor, dass dies auf jedem Browser/Gerät funktioniert.

-Code-Schnipsel (die relevanten Teile)

HTML

<div class="topbar"> 
    <h1>Whoo pink!</h1> 
    <div class="fixed-menu">Fixed!</div> 
</div> 
<div class="loads-of-content"> 
    <div class="fixed-menu">Fixed!</div> 
</div> 

CSS

.topbar { 
    position: relative; 
    overflow: hidden; 
    z-index: 3; 
} 

.topbar .fixed-menu { 
    color: red; 
} 
.fixed-menu { 
    position: fixed; 
    top: 20px; 
    right: 50px; 
} 
.loads-of-content { 
    position: relative; 
    overflow: hidden; 
} 

Answer 4

Wenn Sie nicht ha wollen diesen Effekt mit CSS ziehen aus clip nach Antony Lösung ve doppelte Elemente zu verwalten, dann können Sie ein paar jQuery-Plugins verwenden:

• jq-clipthru - Dies ist eine Trosse Plugin, das wahrscheinlich alles tun, können Sie wollen (und viel mehr), aber es erfordert auch die jQuery UI-Bibliothek. [Demo]

• Unobscure Text - Das ist mein sehr leicht Plugin, das einen sehr spezifischen Anwendungsfall hat, aber es ist nicht kompatibel mit jQuery 3. [Demo]

Wenn benötigen Sie jQuery 3 Unterstützung und don Wenn Sie IE 11 und darunter nicht beachten, können Sie eine Lösung verwenden, die auf SVG clip-path, like this basiert.