个人中心
gpt4 book ai didi

javascript - 滚动后无法更改某些元素样式

转载 作者：行者123 更新时间：2023-11-30 15:20:25 25 4
gpt4 key购买 nike

有人可以帮我解决我在这里做错的事吗？我只想在从顶部向下滚动后将样式应用于 div。有趣的是，只有 header-wrap id 发生了变化，但没有其他变化。为什么是这样？例如t1、slogan 和 navmenus 在滚动后不会改变，但 header-wrap 会改变。

非常感谢这里的任何帮助。谢谢

$(document).ready(function() {
    var headerWrap = $('#header-wrap');
    var t1 = $('#t1');
    var slogan = $('#slogan');
    var navMenu = $('ul.nav-menu');
    var navMenuLink = $('ul.nav-menu a:link');
    var navMenuVisited = $('ul.nav-menu a:visited');
    var navMenuHover = $('ul.nav-menu a:hover');

    $(window).scroll(function () {
        headerWrap.addClass('scroll-opacity-change');
        t1.addClass('t1-on-scroll');
        slogan.addClass('slogan-on-scroll');
        navMenu.addClass('ul.nav-menu');
        navMenuLink.addClass('ul.nav-menu a:link');
        navMenuVisited.addClass('ul.nav-menu a:visited');
        navMenuHover.addClass('ul.nav-menu a:hover');

        if($(this).scrollTop() <= 0) {
            headerWrap.removeClass('scroll-opacity-change');
            t1.removeClass('t1-on-scroll');
            slogan.removeClass('slogan-on-scroll');
            navMenu.removeClass('ul.nav-menu-on-scroll');
            navMenuLink.removeClass('ul.nav-menu-on-scroll a:link');
            navMenuVisited.removeClass('ul.nav-menu-on-scroll a:visited');
            navMenuHover.removeClass('ul.nav-menu-on-scroll a:hover');
        }
    });
});
body{height:1000px;width:auto;}

#header-wrap{
	background:#4E6273;
	width:100%;
	height:auto;
	border-bottom: 2px solid #f4fafe;
	position:fixed;
	top:0;/* may not be needed but no harm in having */
	z-index:100000;
	/* margin:0 auto; needed? */
	opacity:0.9;
}
.scroll-opacity-change{
	opacity:0.9;
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
	background:#f4fafe !important;
	border-bottom: 2px solid #94C8F2 !important;
}
#t1{
	font-family:'Open Sans', sans-serif;
	font-weight:100;
	text-transform:none;
	color:#E6E8EB;
	font-size:24px;
}
#t1.t1-on-scroll{
	color:#f00;
}
#slogan{
	font-family:'Open Sans', sans-serif;
	font-weight:100;
	text-transform:uppercase;
	font-size:12px;
	color:#E6E8EB;
}
#slogan.slogan-on-scroll{
	color:#f00;
}
ul.nav-menu{
	list-style-type:none;
	margin-left: 50px;
	font-size:20px;
	font-family:'Open Sans', sans-serif;
	font-weight:400;
	color:#E6E8EB;
	padding:0;
	margin:0 0 0 0;
	text-decoration:none;
}
ul.nav-menu li{
	display:inline-block;
	margin-left:50px;
}
ul.nav-menu a:link{
	color:#E6E8EB;
	text-decoration:none;
}
ul.nav-menu a:visited{
	color:#E6E8EB;
	text-decoration:none;
}
ul.nav-menu a:hover{
	color:#B4E9FF;
}
ul.nav-menu-on-scroll{
	list-style-type:none;
	margin-left: 50px;
	font-size:20px;
	font-family:'Open Sans', sans-serif;
	font-weight:400;
	color:#f0f;
	padding:0;
	margin:0 0 0 0;
	text-decoration:none;
}
ul.nav-menu-on-scroll li{
	display:inline-block;
	margin-left:50px;
}
ul.nav-menu-on-scroll a:link{
	color:#f0f;
	text-decoration:none;
}
ul.nav-menu-on-scroll a:visited{
	color:#f0f;
	text-decoration:none;
}
ul.nav-menu-on-scroll a:hover{
	color:#f00;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>


<header id="header-wrap">
  <div id="header-top">
    <div id="header-left-wrap">
     
      <div id="header-text-wrap">
      
      <div id="header-title-wrap">
      <span id="t1">title<span id="t1-emphasis">acronym</span></span>
      </div>
      
      <div id="header-slogan-wrap">
      <span id="slogan">slogan</span>
      </div>
    
        
        
      </div>
    </div>
    
    <div id="header-right-wrap">
    <nav class="wrap">
   <a href="#" id="header-nav-menu"></a>
    <ul class="nav-menu">
    <li><a href="#">Services</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
    </nav>
    </div>
  </div>
</header>

最佳答案

您的代码完全错误!!您向导航菜单添加了错误的类，您的一些代码甚至没有意义，例如 addClass('ul.nav-menu a:link') 或 var navMenuVisited = $('ul.nav-menu a:visited');

navMenu.addClass('nav-menu-on-scroll');
...
navMenu.removeClass('nav-menu-on-scroll');

就是你所需要的。

$(document).ready(function() {
    var headerWrap = $('#header-wrap');
    var t1 = $('#t1');
    var slogan = $('#slogan');
    var navMenu = $('ul.nav-menu');


    $(window).scroll(function () {
        headerWrap.addClass('scroll-opacity-change');
        t1.addClass('t1-on-scroll');
        slogan.addClass('slogan-on-scroll');
        navMenu.addClass('nav-menu-on-scroll');


        if($(this).scrollTop() <= 0) {
            headerWrap.removeClass('scroll-opacity-change');
            t1.removeClass('t1-on-scroll');
            slogan.removeClass('slogan-on-scroll');
            navMenu.removeClass('nav-menu-on-scroll');

        }
    });
});
body{height:1000px;width:auto;}

#header-wrap{
	background:#4E6273;
	width:100%;
	height:auto;
	border-bottom: 2px solid #f4fafe;
	position:fixed;
	top:0;/* may not be needed but no harm in having */
	z-index:100000;
	/* margin:0 auto; needed? */
	opacity:0.9;
}
.scroll-opacity-change{
	opacity:0.9;
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
	background:#f4fafe !important;
	border-bottom: 2px solid #94C8F2 !important;
}
#t1{
	font-family:'Open Sans', sans-serif;
	font-weight:100;
	text-transform:none;
	color:#E6E8EB;
	font-size:24px;
}
#t1.t1-on-scroll{
	color:#f00;
}
#slogan{
	font-family:'Open Sans', sans-serif;
	font-weight:100;
	text-transform:uppercase;
	font-size:12px;
	color:#E6E8EB;
}
#slogan.slogan-on-scroll{
	color:#f00;
}
ul.nav-menu{
	list-style-type:none;
	margin-left: 50px;
	font-size:20px;
	font-family:'Open Sans', sans-serif;
	font-weight:400;
	color:#E6E8EB;
	padding:0;
	margin:0 0 0 0;
	text-decoration:none;
}
ul.nav-menu li{
	display:inline-block;
	margin-left:50px;
}
ul.nav-menu a:link{
	color:#E6E8EB;
	text-decoration:none;
}
ul.nav-menu a:visited{
	color:#E6E8EB;
	text-decoration:none;
}
ul.nav-menu a:hover{
	color:#B4E9FF;
}
ul.nav-menu-on-scroll{
	list-style-type:none;
	margin-left: 50px;
	font-size:20px;
	font-family:'Open Sans', sans-serif;
	font-weight:400;
	color:#f0f;
	padding:0;
	margin:0 0 0 0;
	text-decoration:none;
}
ul.nav-menu-on-scroll li{
	display:inline-block;
	margin-left:50px;
}
ul.nav-menu-on-scroll a:link{
	color:#f0f;
	text-decoration:none;
}
ul.nav-menu-on-scroll a:visited{
	color:#f0f;
	text-decoration:none;
}
ul.nav-menu-on-scroll a:hover{
	color:#f00;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>


<header id="header-wrap">
  <div id="header-top">
    <div id="header-left-wrap">
     
      <div id="header-text-wrap">
      
      <div id="header-title-wrap">
      <span id="t1">title<span id="t1-emphasis">acronym</span></span>
      </div>
      
      <div id="header-slogan-wrap">
      <span id="slogan">slogan</span>
      </div>
    
        
        
      </div>
    </div>
    
    <div id="header-right-wrap">
    <nav class="wrap">
   <a href="#" id="header-nav-menu"></a>
    <ul class="nav-menu">
    <li><a href="#">Services</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
    </nav>
    </div>
  </div>
</header>

关于javascript - 滚动后无法更改某些元素样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43825946/

25 4 0
文章推荐： javascript - 在树遍历完成回调后执行函数
文章推荐： C编程: Pointer arithmetics instead of index operations
文章推荐： c# - 想知道 async/await 解决方案是否干净
文章推荐： c - 更改矩阵大小后访问未分配的内存
行者123
个人简介

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

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