Question

我的导航从透明变为#eee并获得一个盒子阴影 - ＆＃39; 0px 1px 3px rgba（0,0,0,0.2）＆＃39;当它通过我的标题h1标记。我该如何做到这一点并让它回到没有盒子阴影而没有填充？

代码：

＆＃13;

$(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)');
       }
   });
    }
});

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

代码段可能已损坏，所以我道歉，实时代码在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');
}

实施例

＆＃13;

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'
    });
  }
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

当你在偏移量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
   }

Answer 3

更改您的javascript代码，如下所示。您必须编写Traceback (most recent call last): File "<stdin>", line 1, in <module> File "C:\Users\ssisharm\Anaconda3\lib\site-packages\spyder\utils\site\sitecustomize.py", line 866, in runfile execfile(filename, namespace) File "C:\Users\ssisharm\Anaconda3\lib\site-packages\spyder\utils\site\sitecustomize.py", line 102, in execfile exec(compile(f.read(), filename, 'exec'), namespace) File "C:/Users/ssisharm/Documents/Python Scripts/news_summary.py", line 19, in <module> no_of_ners=len([chunk for chunk in ners if hasattr(chunk,'node')]) File "C:/Users/ssisharm/Documents/Python Scripts/news_summary.py", line 19, in <listcomp> no_of_ners=len([chunk for chunk in ners if hasattr(chunk,'node')]) File "C:\Users\ssisharm\Anaconda3\lib\site-packages\nltk\tree.py", line 202, in _get_node raise NotImplementedError("Use label() to access a node label.") NotImplementedError: Use label() to access a node label.条件才能实现此目的

else

如何让导航回到顶部透明

3 个答案: