个人中心
gpt4 book ai didi

javascript - 更改导航栏列表中文本和背景的颜色

转载 作者：行者123 更新时间：2023-11-28 02:24:52 25 4
gpt4 key购买 nike

所以，我对此有点陌生，我需要一些帮助。我有一个用作导航栏的列表，我想在滚动标题时更改它的文本颜色和背景颜色，以便它始终可见。

这是代码:`

$(document).ready(function(){
  $(window).scroll(function(){
  	var scroll = $(window).scrollTop();
	  if (scroll > 300) {
	    $(".nav").css("text-color" , "black");
	  }
	  else{
		  $(".nav").css("text-color" , "white");  	
	  }
  })
})
/* Fara scroll-bar */
::-webkit-scrollbar { 
    display: none; 
}
/* Fonturi */
@font-face{
font-family:myfont;
src: url("fonts/Hum521It.ttf");
}
@font-face{
font-family:myfont2;
src: url("fonts/Montserrat-Medium.ttf");
}
@font-face{
font-family:myfont3;
src: url("fonts/Oswald-Regular.ttf");
}
@font-face{
font-family:myfont4;
src: url("fonts/Slabo27px-Regular.ttf");
}
@font-face{
font-family:myfont5;
src: url("fonts/Arapey-Regular.ttf");
}
@font-face{
font-family:myfont6;
src: url("fonts/RobotoCondensed-Light.ttf");
}
@font-face{
font-family:myfont7;
src: url("fonts/RobotoCondensed-Regular.ttf");
}
@font-face{
font-family:myfont8;
src: url("fonts/Raleway-Light.ttf");
}
@font-face{
font-family:myfont9;
src: url("fonts/SourceSansPro-Regular.ttf");
}
/* Structura */
* {
    box-sizing: border-box;
}
body{
	background-color:white;
	margin:0;
}
header{
	background-color:black;
	height:100vh;
}
main{
	
}
footer{
	background-color:black;
	float:bottom;
	text-color:white;
	width:100%;
	text-align:center;
	padding:30px;
}
/* Side-nav */

/* Nav-bar */
ul {
  list-style-type: none;
  margin: 0;
  padding: 20px;
  overflow: hidden;
  position:fixed;
  top:0;
  width:100%;
  
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
.menu_white {
 color: white;
}
.menu_black {
 color: black;
}
/* Div-ul in care e nav-bar-ul*/
.nav {

}
/* Strike-through */
.strikethrough {
	display: inline-block;
	position: relative;
	transition: all 0.5s cubic-bezier(.55, 0, .1, 1);
}
.strikethrough:after {
	content: '';
	position: absolute;
	display: block;
	width: 100%;
	height: 2px;
	box-shadow: 0 1px rgba(255,255,255,0.6);
	margin-top: -0.7em;
	background: white;
	transform-origin: center left;
	animation: strikethrough 1s 0.5s cubic-bezier(.55, 0, .1, 1) 1;
	transition: transform 0.5s cubic-bezier(.55, 0, .1, 1);
}
@keyframes strikethrough {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}
.strikethrough:hover:after {
	transform: scaleX(0);
	transform-origin: center right;
}
/* Paragrafe */
p{
	font-size:140px;
    text-align:center;
	text-color:white;
	font-family: 'myfont2', sans-serif; 
}
p2{
	font-size:17px;
    text-align:center;
	text-color:white;
	font-family: 'myfont6', sans-serif; 
}
p3{
	font-size:90px;
    text-align:center;
	text-color:white;
	font-family: 'myfont8', sans-serif; 
}
p4{
	font-size:17px;
    text-align:center;
	text-color:white;
	font-family: 'myfont8', sans-serif; 
}
p5{
	font-size:17px;
    text-align:center;
	text-color:white;
	font-family: 'myfont9', sans-serif; 
}
p6{
	font-size:90px;
    text-align:center;
	text-color:white;
	font-family: 'myfont8', sans-serif; 
}
/* test */
  <html>
   <head>
      <meta charset="utf-8">
      <link rel="stylesheet" type="text/css" href="css/mystyle.css">
   </head>
   <body>
      <header>
         <div class="nav">
            <ul>
               <li>
                  <a href="#home">
                     <span class="strikethrough">
                        <p2>Home</p2>
                     </span>
                  </a>
               </li>
               <li>
                  <a href="#news">
                     <span class="strikethrough">
                        <p2>Projects</p2>
                     </span>
                  </a>
               </li>
               <li>
                  <a href="#contact">
                     <span class="strikethrough">
                        <p2>Contact</p2>
                     </span>
                  </a>
               </li>
               <li style="float:right">
                  <a href="#about">
                     <span class="strikethrough">
                        <p2>About</p2>
                     </span>
                  </a>
               </li>
            </ul>
         </div>
         <br><br><br><br><br><br><br><br><br>
         <div class="nume">
            <p3><font style="color:white;padding-left:40px;">C Î R S T O I U  &nbsp B O G D A N</font></p3>
         </div>
         <br><br><br><br><br><br><br><br>
         <div class="nume2">
            <p6><font style="color:white;padding-left:500px;">-&nbsp W h o &nbsp a m &nbsp I ?&nbsp - </font></p6>
         </div>
      </header>
      <main>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
      </main>
      <footer>
         <div class="nume2" style="padding:15px;">
            <p4><font style="color:white;text-align:center">Cîrstoiu Bogdan - 2018<br> All rights reserved</font></p4>
         </div>
      </footer>
      <script src="/scripts/scripts.js"></script>
   </body>
</html>

我想要的只是一个简单的方法，它有效，我已经尝试了一些但它们不起作用。在上面显示的代码中尝试这样做，但它不起作用。如果您有任何建议，请让我知道 。谢谢!

编辑:此外，如果有人对我如何使此响应有提示，请告诉我或指导我学习教程!

最佳答案

您正试图在 JavaScript 中更改元素 nav 的颜色。您真的应该更改导航栏中嵌套的段落标记的颜色。

我做了一个简单的示例来展示所需的行为，为简单起见，我删除了字体。

解决此问题的另一种方法是使导航栏具有粘性。

 $(window).scroll(function() {
   var scroll = $(window).scrollTop();
   if (scroll > 50) {
   var element = $('.p2');
     $(".p2").css("color", "black");
   } else {
     $(".p2").css("color", "white");
   }
 })
 body {
   background-color: white;
   margin: 0;
 }

 header {
   background-color: #6495ED;
   height: 100px;
 }

 footer {
   background-color: black;
   float: bottom;
   color: white;
   width: 100%;
   text-align: center;
   padding: 30px;
 }


 /* Side-nav */

 /* Nav-bar */

 ul {
   list-style-type: none;
   margin: 0;
   padding: 20px;
   overflow: hidden;
   position: fixed;
   top: 0;
   width: 100%;
 }

 li {
   float: left;
 }

 li a {
   display: block;
   color: white;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
 }

 .menu_white {
   color: white;
 }

 .menu_black {
   color: black;
 }

 .strikethrough {
   display: inline-block;
   position: relative;
   transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
 }

 .strikethrough: after {
   content: '';
   position: absolute;
   display: block;
   width: 100%;
   height: 2px;
   box-shadow: 0 1px rgba(255, 255, 255, 0.6);
   margin-top: -0.7em;
   background: white;
   transform-origin: center left;
   animation: strikethrough 1s 0.5s cubic-bezier(0.55, 0, 0.1, 1) 1;
   transition: transform 0.5s cubic-bezier(0.55, 0, 0.1, 1);
 }

 @keyframes strikethrough {
   from {
     transform: scaleX(0);
   }

   to {
     transform: scaleX(1);
   }
 }

 .strikethrough:hover: after {
   transform: scaleX(0);
   transform-origin: center right;
 }

 /* Paragrafe */

 p {
   font-size: 140px;
   text-align: center;
   color: black;
 }

 .p2 {
   font-size: 17px;
   text-align: center;
   color: white;
 }

 .p3 {
   font-size: 90px;
   text-align: center;
   color: black;
 }

 .p4 {
   font-size: 17px;
   text-align: center;
   color: black;
 }

 .p5 {
   font-size: 17px;
   text-align: center;
   color: black;
 }

 .p6 {
   font-size: 90px;
   text-align: center;
   color: black;
 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

  <head>
    <meta charset="utf-8">
  </head>

  <body>
    <header>
      <div class="nav">
        <ul>
          <li>
            <a href="#home">
                     <span class="strikethrough">
                        <div class = "p2">Home</div>
                     </span>
                  </a>
          </li>
          <li>
            <a href="#news">
                     <span class="strikethrough">
                      <div class = "p2">Projects</div>
                     </span>
                  </a>
          </li>
          <li>
            <a href="#contact">
                     <span class="strikethrough">
                     <div class = "p2">Contact</div>
                     </span>
                  </a>
          </li>
          <li style="float:right">
            <a href="#about">
                     <span class="strikethrough">
                     <div class = "p2">About</div>
                     </span>
                  </a>
          </li>
        </ul>
      </div>
      <br><br><br><br><br><br><br><br><br>
      <div class="nume">
        <p3>
          <font style="color:white;padding-left:40px;">C Î R S T O I U &nbsp B O G D A N</font>
        </p3>
      </div>
      <br><br><br><br><br><br><br><br>
      <div class="nume2">
        <p6>
          <font style="color:white;padding-left:500px;">-&nbsp W h o &nbsp a m &nbsp I ?&nbsp - </font>
        </p6>
      </div>
    </header>
    <main>
      <p>Test</p>
      <p>Test</p>
      <p>Test</p>
      <p>Test</p>
      <p>Test</p>
    </main>
    <footer>
      <div class="nume2" style="padding:15px;">
        <p4>
          <font style="color:white;text-align:center">Cîrstoiu Bogdan - 2018<br> All rights reserved</font>
        </p4>
      </div>
    </footer>
  </body>

</html>

关于javascript - 更改导航栏列表中文本和背景的颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54873150/

25 4 0
文章推荐： javascript - 添加行运行时时如何在数据表中为 td 添加类？
文章推荐： jquery - 如果我单击任何子项，如何在顶部设置事件类
文章推荐： javascript - 在我的网站上创建一个可缩放的修改按钮
文章推荐： javascript - 我正在尝试从 javascript 加载一个弹出窗口，它可以工作，但是，当我单击关闭弹出窗口时，没有任何反应
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com