navを透明に戻す方法

Question

私のnavが透明から#eeeに変更され、ボックスシャドウが得られます - ヘッダのh1タグを渡すときに '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のコードを変更し

：あなたは再びオフセットの上にいるとき

は、あなただけのスタイルを削除する必要があります。あなたはどのようにおよび/またはそれが答えの長期的な価値を向上させるという問題を解決する理由に関する追加のコンテキストを提供し、このコードは質問に答えるかもしれないが、この

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