滚动时更改按钮颜色的剪辑

Posted

技术标签:

【中文标题】滚动时更改按钮颜色的剪辑【英文标题】：Clip for change button color when scroll 【发布时间】：2015-10-23 09:52:39 【问题描述】：

我正在尝试这样做：CSS change color on scroll / cut text - overflow z-index 当有人滚动时，它使用剪辑来更改按钮的颜色。我希望它在从标题移动到正文时发生变化，但它对我不起作用。

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>

为什么它不起作用？

【问题讨论】：

它应该是什么样子的？ 我想做***.com/questions/27484858/…，但它在我的源代码中不起作用 【参考方案1】：

这是您需要的答案，您只是错过了一些规则。 检查下面的 sn-p 是否有 cmets...

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>

【讨论】：

有没有什么办法可以得到这种效果，但没有绝对定位的内容？谢谢【参考方案2】：

您应该使用 jquery 在滚动时更改菜单的颜色，如下所示：

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

【讨论】：

非常感谢！但我想使用 css，它更高效，效果更好。我想要***.com/questions/27484858/… 哦.. 一切顺利... @Lifka

以上是关于滚动时更改按钮颜色的剪辑的主要内容，如果未能解决你的问题，请参考以下文章

在 Swift 中按下 uibutton 时更改色调图像颜色

按下按钮时更改列表视图背景颜色

我不知道我在做啥错，我想在页面滚动时更改导航栏的背景颜色

如何在 Kivy 中动态更改标签背景颜色

向上滚动和向下滚动时导航按钮的颜色变化

滚动时更改背景颜色