Ul样式仅在滚动时更改，在返回滚动/更改点时失去样式

ul style only changes on scroll, loses styling when returning to scroll/change point

本文关键字：滚动 样式 失去 Ul 返回      更新时间：2023-09-26

我正在尝试在滚动上更改标题，到目前为止，我可以获得标题尺寸和颜色/不透明度更改，背景图像等。但是ul/nav的行为很奇怪。在加载页面时，导航具有所有适当的样式，当我向下滚动时，javascript完美地更改了样式。但是，当我向上滚动时，所有样式都被删除，直到页面刷新。下面是我的代码:

HTML: 

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>Some Title</title>
    <meta charset="utf-8" >
    <meta http-equiv="X-UA-Compatible" content="
    IE=EDGE" />
    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <!--
    <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" />
    <link rel="stylesheet" href="css/default.css" type="text/css" />
    -->
    <!-- Fonts -->
    <link href='http://fonts.googleapis.com/css?family=Allan:400,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>
    <!-- JavaScript-->
     <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
      <script src="js/header-change.js" type="text/javascript"></script>

</head>
<body>
    <header class="clearFix header">
        <div class="header-container ">
            <nav>
                <ul class="nav">
                    <li>Contact</li>
                    <li>Portfolio</li>
                    <li>About</li>
                </ul>
            </nav>
        </div>  
    </header>
    <main></main>
</body>

JS: 

$(function(){
var changeHeader = 100;
$(window).scroll(function() {
var scroll = getCurrentScroll();
  if ( scroll >= changeHeader ) {
       $('.header').addClass('scroll');
       $('.nav').addClass('scroll');
       $('.header-container').addClass('scroll');
    }
    else {
        $('.header').removeClass('scroll');
        $('.nav').removeClass('nav');
        $('.header-container').removeClass('scroll');
    }
});
function getCurrentScroll() {
return window.pageYOffset;
}
});
CSS: 

*{
margin: 0;
padding:0;
}
h1{
font-size:  56px;
padding: 20px;
font-family: 'Allan', cursive;
color: #5f2219;
}
h3{
font-family: 'Allan', cursive;
font-size: 32px;
padding-left: 20px;
color: #5f2219;
}
.header{
position: fixed;
z-index: 100;
height: 70px;
background-color: rgba(255, 255, 255, 1);
width: 100%;
opacity: 1;
}
.header.scroll{
background-color: rgba(255, 255, 255, 0.6);
height: 40px;
}
.header-container{
width:980px;
height:70px;
margin: 0 auto;
background-image: url('../images/binder_hdr.png');
background-repeat:no-repeat;
background-position: 0%75%;
}
.header-container.scroll{
width:980px;
height:40px;
margin: 0 auto;
background-image: url('../images/binder_mini_hdr.png');
background-repeat:no-repeat;
background-position: 0%;
}
.nav {
font-family: 'Orbitron', sans-serif;
 list-style-type: none;
 color: #383838;
 line-height: 50px;
 font-size: 20px;
 text-align: center;
}
nav ul li{
float: right;
padding-right: 60px;
padding-top: 26px;
}
.nav.scroll {
font-family: 'Orbitron', sans-serif;
list-style-type: none;
 color: #383838;
 line-height: 5px;
 font-size: 16px;
  text-align: center;
}
.clearFix:after {
clear: both;
display: table;
content: "";
overflow: hidden;
}

任何帮助都将非常感激。我不太熟悉JS/jQuery，所以我不确定我是否有正确的一切。

您已经删除了else部分中的.nav类。

所以你的CSS &jQuery选择器.nav和.nav.scroll也不能使用

你可以只控制一个类，如.scroll，但不能切换.nav和.scroll

你

: 

if (...)
  $('.nav').addClass('scroll');
else (...)
  $('.nav').removeClass('nav');

建议:

if (...)
  $('.nav').addClass('scroll');
else (...)
  $('.nav').removeClass('scroll');

谢谢,爱迪生

相关文章：