1
有人可以幫助我解決我在這裏做錯了什麼嗎？我只是希望樣式從頂部向下滾動後應用於div。足夠有趣只有標題封裝標識改變，但沒有其他更改。爲什麼是這樣？例如t1，標語和navmenus在滾動後不會改變，但是標題換行確實如此。滾動後無法更改某些元素樣式
真的很感謝這裏的任何幫助。謝謝
$(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{
\t background:#4E6273;
\t width:100%;
\t height:auto;
\t border-bottom: 2px solid #f4fafe;
\t position:fixed;
\t top:0;/* may not be needed but no harm in having */
\t z-index:100000;
\t /* margin:0 auto; needed? */
\t opacity:0.9;
}
.scroll-opacity-change{
\t opacity:0.9;
\t -webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
\t background:#f4fafe !important;
\t border-bottom: 2px solid #94C8F2 !important;
}
#t1{
\t font-family:'Open Sans', sans-serif;
\t font-weight:100;
\t text-transform:none;
\t color:#E6E8EB;
\t font-size:24px;
}
#t1.t1-on-scroll{
\t color:#f00;
}
#slogan{
\t font-family:'Open Sans', sans-serif;
\t font-weight:100;
\t text-transform:uppercase;
\t font-size:12px;
\t color:#E6E8EB;
}
#slogan.slogan-on-scroll{
\t color:#f00;
}
ul.nav-menu{
\t list-style-type:none;
\t margin-left: 50px;
\t font-size:20px;
\t font-family:'Open Sans', sans-serif;
\t font-weight:400;
\t color:#E6E8EB;
\t padding:0;
\t margin:0 0 0 0;
\t text-decoration:none;
}
ul.nav-menu li{
\t display:inline-block;
\t margin-left:50px;
}
ul.nav-menu a:link{
\t color:#E6E8EB;
\t text-decoration:none;
}
ul.nav-menu a:visited{
\t color:#E6E8EB;
\t text-decoration:none;
}
ul.nav-menu a:hover{
\t color:#B4E9FF;
}
ul.nav-menu-on-scroll{
\t list-style-type:none;
\t margin-left: 50px;
\t font-size:20px;
\t font-family:'Open Sans', sans-serif;
\t font-weight:400;
\t color:#f0f;
\t padding:0;
\t margin:0 0 0 0;
\t text-decoration:none;
}
ul.nav-menu-on-scroll li{
\t display:inline-block;
\t margin-left:50px;
}
ul.nav-menu-on-scroll a:link{
\t color:#f0f;
\t text-decoration:none;
}
ul.nav-menu-on-scroll a:visited{
\t color:#f0f;
\t text-decoration:none;
}
ul.nav-menu-on-scroll a:hover{
\t 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>
你以前利用的jQuery JavaScript函數包括jQuery庫？你把這些功能準備好了嗎？ （在代碼片段中，jquery沒有定義） –
我現在有，但只有第一個元素'header-wrap'正在改變，其他不是 – user3760941