如何使nav回到顶部透明

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'); 
 
\t \t $("#nav").css('-webkit-box-shadow', '0px 1px 3px rgba(0, 0, 0, 0.2)'); 
 
\t \t $("#nav").css('-moz-box-shadow', '0px 1px 3px rgba(0, 0, 0, 0.2)'); 
 
\t \t $("#nav").css('box-shadow', '0px 1px 3px rgba(0, 0, 0, 0.2)'); 
 
     } 
 
    }); 
 
    } 
 
});

/* nav css */ 
 

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

 
/*header css*/ 
 

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

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

 
#header h3 { 
 
\t color:#cccccc; 
 
} 
 

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

 
#prevent { 
 
\t width:100%; 
 
\t 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"> 
 
\t <ul> 
 
     \t <li id="logo"><a href="index.html"><b>symmetry creative.</b></a></li> 
 
     \t <li><a href="about.html"><b>about us.</b></a></li> 
 
     \t <li><a href="services.html"><b>services.</b></a></li> 
 
\t \t <li><a href="pricing.html"><b>pricing.</b></a></li> 
 
\t \t <li><a href="contact.html"><b>contact.</b></a></li> 
 
\t </ul> 
 
</div> 
 

 
<div id="header"> 
 
\t <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'); 
      } 
     }); 
    } 
}); 

Answer 2

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