2

I am trying do it: CSS change color on scroll / cut text - overflow z-index It is use clip for change color of a button when somebody are scrolling. I want it changes when move from header to body, but it doesn't work for me.

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;
}
 <div id="wrapper">

    <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>

Why it doesn't work?

Community
  • 1
  • 1
Lifka
  • 249
  • 1
  • 7
  • 17
  • What is it supposed to look like? – MTCoster Oct 23 '15 at 09:53
  • I want to make it http://stackoverflow.com/questions/27484858/css-change-color-on-scroll-cut-text-overflow-z-index/27517165#27517165 but it doesn't work in my source – Lifka Oct 23 '15 at 10:22

2 Answers2

4

Here's the answer you needed, you just missed a few rules. Check the snippet below for comments...

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>
Rene van der Lende
  • 4,992
  • 2
  • 14
  • 25
0

You should use jquery to change the color of menu on scrolling, like below:

$(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">

    <div id="header">

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

  </div>

  <div id="content"> 

      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>
Shahzad Barkati
  • 2,532
  • 6
  • 25
  • 33
  • Thanks a lot! But I want to use css, It's more efficent and works better. I would like it http://stackoverflow.com/questions/27484858/css-change-color-on-scroll-cut-text-overflow-z-index/27517165#27517165 – Lifka Oct 23 '15 at 10:18
  • Ohk.. All the best... @Lifka – Shahzad Barkati Oct 23 '15 at 10:21