javascript - 如何使导航回到顶部透明

Question

当它通过我的标题 h1 标记时，我的导航从透明更改为 #eee 并获得 box-shadow - '0px 1px 3px rgba(0, 0, 0, 0.2)'。我该如何做相反的事情并让它回到没有盒子阴影和没有填充的状态？

代码:

$(document).ready(function(){       
   var scroll_start = 0;
   var startchange = $('#header h1');
   var offset = startchange.offset();
    if (startchange.length){
   $(document).scroll(function() { 
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
          $("#nav").css('background-color', '#eee');
		  $("#nav").css('-webkit-box-shadow', '0px 1px 3px rgba(0, 0, 0, 0.2)');
		  $("#nav").css('-moz-box-shadow', '0px 1px 3px rgba(0, 0, 0, 0.2)');
		  $("#nav").css('box-shadow', '0px 1px 3px rgba(0, 0, 0, 0.2)');
       }
   });
    }
});

/* nav css */

#nav {
	position:fixed;
	width:100%;
	height:75px;
	background-color:transparent;
	display: inline-block;
	vertical-align:auto;
	z-index: 10000;
	top: 0;
	margin:auto;
	left: 0;
	right: 0;
	text-align:center;
	transition: background-color 500ms linear;
	
}
#nav ul li {
	width:150px;
	height:75px;
	list-style-type:none;
	text-align:center;
	line-height:50px;
	cursor:pointer;
	font-size:15px;
	display: inline-block;
	vertical-align:middle;
	margin-top:15px;
}
#nav ul li a {
	text-decoration:none;
	color:#999;
	display:block;
}
#nav ul li a:hover {
	color:#bdbdbd;
}

/*header css*/

#header {
	position:absolute;
	height:100vh;
	width:100%;
	background-color:rgb(164,164,164);
	text-align:center;
	display:block;
	z-index:9998;
	margin-top:0;
	background-image:url(../images/mac-header.jpg);
	background-repeat:no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
     -o-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
}

#header h1 {
	position:relative;
	margin-top:40vh;
	display:block;
	font-size:75px;
	color:#eeeeee;
}

#header h3 {
	color:#cccccc;
}

#header h1 {
	-webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
	 -moz-animation: fadein 5s; /* Firefox < 16 */
	  -ms-animation: fadein 5s; /* Internet Explorer */
   	   -o-animation: fadein 5s; /* Opera < 12.1 */
    	animation: fadein 5s;
}

#prevent {
	width:100%;
	height:100vh;
}

#placeholder {
  width:100%;
  height:100vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div id="nav">
	<ul>
       	<li id="logo"><a href="index.html"><b>symmetry creative.</b></a></li>
       	<li><a href="about.html"><b>about us.</b></a></li>
      	<li><a href="services.html"><b>services.</b></a></li>
		<li><a href="pricing.html"><b>pricing.</b></a></li>
		<li><a href="contact.html"><b>contact.</b></a></li>
	</ul>
</div>

<div id="header">
	<h1>symmetry creative.</h1>
</div>

<div id="placeholder"></div>

代码片段可能已损坏，因此我深表歉意，实时代码位于 http://jackfinn3y.co.uk/RJ-Creative/symmetry/website/

Answer 1

按如下所示更改您的 JavaScript 代码。您必须编写 else 条件才能实现此目的

$(document).ready(function () {
    var scroll_start = 0;
    var startchange = $('#header h1');
    var offset = startchange.offset();
    if (startchange.length) {
        $(document).scroll(function () {
            scroll_start = $(this).scrollTop();
            if (scroll_start > offset.top) {
                $("#nav").css('background-color', '#eee');
                $("#nav").css('-webkit-box-shadow', '0px 1px 3px rgba(0, 0, 0, 0.2)');
                $("#nav").css('-moz-box-shadow', '0px 1px 3px rgba(0, 0, 0, 0.2)');
                $("#nav").css('box-shadow', '0px 1px 3px rgba(0, 0, 0, 0.2)');
            }
            else {
                $("#nav").css('background-color', 'transparent');
                $("#nav").css('-webkit-box-shadow', 'none');
                $("#nav").css('-moz-box-shadow', 'none');
                $("#nav").css('box-shadow', 'none');
            }
        });
    }
});