如何使导航回到顶部透明

Question

当它通过我的标题 h1 标签时，我的导航从透明变为 #eee 并获得一个框阴影 - '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>

sn-p 可能坏了，所以我很抱歉，实时代码在http://jackfinn3y.co.uk/RJ-Creative/symmetry/website/

Answer 1

if(scroll_start > offset.top) {
  $("#nav").css('background-color', '#eee');
  // ...
} else {
  $("#nav").css('background-color', 'transparent');
}

例子

var startChange = $("#header h1");

var offset = startChange.offset();

$(document).scroll(function() {
  var scrollStart = $(this).scrollTop();

  if (scrollStart > offset.top - $("#nav").height()) {
    $("#nav").css({
      'background-color': '#eee'
    });
  } else {
    $("#nav").css({
      'background-color': 'transparent'
    });
  }
});

body {
  height: 3000px;
}

#nav {
  border: 2px solid #000;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
}

#nav a {
  display: inline-block;
  padding: 10px;
}

#header h1 {
  margin-top: 100px;
  text-align: center;
  border: 2px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="nav">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>

<div id="header">
  <h1>Adipisicing quos vitae itaque provident?</h1>
</div>

Answer 2

如下更改您的 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');
            }
        });
    }
});

Answer 3

当您滚动到偏移量if(scroll_start > offset.top) { ... } 以下时，您有专门设置 CSS 的 JavaScript 代码，但是当您向上滚动时，您什么也不做。

当你再次超过偏移量时，你只需要删除样式：

   if(scroll_start > offset.top) {
     // your existing code
   } else {
     // new code to set style when scroll is above offset
   }