如何使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 
    }