Question

我正在尝试在滚动上更改标题，到目前为止我可以获得标题尺寸和颜色/不透明度更改，背景图像等。但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不太熟悉所以我不确定我是否有正确的一切。

Answer 1

您已删除其他部分的课程.nav。

所以你的css＆amp; jQuery选择器.nav和.nav.scroll也无法使用。

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

你的：

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

建议：

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

感谢，爱迪生

ul样式仅在滚动时更改，在返回滚动/更改点时丢失样式

1 个答案: