Clip pour changer la couleur du bouton lorsque vous faites défiler

Question

J'essaie de le faire: CSS change color on scroll/cut text - overflow z-index Il est utilisé pour changer la couleur d'un bouton lorsque quelqu'un fait défiler. Je veux que ça change quand on passe de l'en-tête au corps, mais ça ne marche pas pour moi.

body { 
 
\t background:#F7FE2E; 
 
\t margin: 0; 
 
} 
 

 
#header{ 
 
\t padding:200px 50px; 
 
\t background-color: #6495ED; 
 
} 
 

 
/*HERE IS THE HEADER AND BODY CLIP*/ 
 
#header, 
 
#content { 
 
\t clip: rect(auto, auto, auto, auto); 
 
\t box-sizing: border-box; 
 
} 
 

 
/********** MENU ***********/ 
 

 
.menu{ 
 
\t top: 15px; 
 
\t right: 40px; 
 
\t font-size: 16px; 
 
\t position:fixed; 
 
} 
 

 
.black { 
 
    color: #000000; 
 
} 
 

 
.white { 
 
    color: #FFFFFF; 
 
}

\t <div id="wrapper"> 
 

 
\t \t <div id="header"> 
 

 
\t \t \t <!--HERE IS THE FIXED MENU WHITE--> 
 
\t  \t \t <div class="menu white">MENU</div> 
 

 
\t \t </div> 
 

 
\t \t <div id="content"> 
 

 
\t  \t <!--HERE IS THE FIXED MENU BLACK--> 
 
\t  \t <div class="menu black">MENU</div> 
 

 
\t  \t CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br> 
 

 
\t  </div> 
 

 
\t </div> \t \t

Pourquoi ça ne fonctionne pas?

Answer 1

voici la réponse dont vous avez besoin, vous venez de manquer quelques règles. Vérifiez l'extrait ci-dessous pour les commentaires ...

body { 
 
    background: some-arbitrary-color; /* clipping doesn't use THIS color => */ 
 
    margin: 0; 
 
} 
 
#header { 
 
    top: 0; /* [OPTIONAL] add */ 
 
    padding: 200px 50px; 
 
    background-color: #6495ED; 
 
} 
 

 

 
/* [MANDATORY] add */ 
 
#content { 
 
    top: 400px;    /* (2 x 200px) px, vw, %, whatever works best*/ 
 
    background-color: #F7FE2E; /* => but NEEDS this bg-color to mix */ 
 
} 
 
/*******************/ 
 

 

 
/*HERE IS THE HEADER AND BODY CLIP*/ 
 
#header, 
 
#content { 
 
    position: absolute; /* [MANDATORY] add, clipping needs absolute positioning */ 
 
    width: 100%;  /* [MANDATORY] add, and position needs width */ 
 
    clip: rect(auto, auto, auto, auto); 
 
    box-sizing: border-box; 
 
} 
 
/********** MENU ***********/ 
 
.menu { 
 
    top: 15px; 
 
    right: 40px; 
 
    font-size: 16px; 
 
    position: fixed; 
 
} 
 
.black { 
 
    color: #000000; 
 
} 
 
.white { 
 
    color: #FFFFFF; 
 
}

<div id="header"> 
 

 
    <!--HERE IS THE FIXED MENU WHITE--> 
 
    <div class="menu white">MENU</div> 
 

 
</div> 
 

 
<div id="content"> 
 

 
    <!--HERE IS THE FIXED MENU BLACK--> 
 
    <div class="menu black">MENU</div> 
 

 
    CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br>CONTENT 
 
    <br> 
 

 
</div> 
 

 
</div>

Answer 2

Vous devez utiliser jquery pour changer la couleur du menu déroulant, comme ci-dessous:

$(window).scroll(function() { 
 
    if ($(this).scrollTop() > 380) { 
 
    $(".menu").removeClass("white").addClass("black"); 
 
    } else { 
 
    $(".menu").removeClass("black").addClass("white"); 
 
    } 
 
});

body { 
 
    background: #F7FE2E; 
 
    margin: 0; 
 
} 
 
#header { 
 
    padding: 200px 50px; 
 
    background-color: #6495ED; 
 
} 
 
/*HERE IS THE HEADER AND BODY CLIP*/ 
 

 
#header, 
 
#content { 
 
    clip: rect(auto, auto, auto, auto); 
 
    box-sizing: border-box; 
 
} 
 
/********** MENU ***********/ 
 

 
.menu { 
 
    top: 15px; 
 
    right: 40px; 
 
    font-size: 16px; 
 
    position: fixed; 
 
} 
 
.black { 
 
    color: #000000; 
 
} 
 
.white { 
 
    color: #FFFFFF; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="wrapper"> 
 

 
\t \t <div id="header"> 
 

 
\t \t \t <!--HERE IS THE FIXED MENU WHITE--> 
 
\t  \t \t <div class="menu white">MENU</div> 
 

 
\t \t </div> 
 

 
\t \t <div id="content"> 
 

 
\t  \t CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br> 
 

 
\t  </div> 
 

 
\t </div> \t