ページのスクロールバーのナビゲーションバーの背景色を変更します。

Question

ページをスクロールすると、固定トップナビゲーションバーがbackground-colorに変更されません。ここで

は、JS関数です：

$(document).ready(function(){  
    var scroll_start = 0; 
    var startchange = $('#startchange'); 
    var offset = startchange.offset(); 
    if (startchange.length){ 
     $(document).scroll(function() { 
      scroll_start = $(this).scrollTop(); 
      if(scroll_start > offset.top) { 
       $(".navbar").css('background-color', '#f0f0f0'); 
      } else { 
       $('.navbar').css('background-color', 'transparent'); 
      } 
     }); 
    } 
}); 

これは「custom.js」と呼ばれ、私はbootstrap and jqueryをロードした後、ページの下部にロードされたファイルである（custom.jsがindex.htmlと同じフォルダにある）

ここで

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<script src="custom.js"></script> 

は、HTMLナビゲーションバーです：

<div class="container"> 
    <nav class="navbar navbar-default navbar-fixed-top"> 
     <div class="container-fluid"> 
      <div class="navbar-header ">     
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarNav"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
      </div> 

      <div id="navbarNav" class="navbar-collapse collapse "> 
       <br/><br/> 
       <ul class="nav navbar-nav navbar-right "> 
        <li><a href="#">ABOUT</a></li> 
        <li><a href="#">SERVICES</a></li> 
        <li><a href="#">CONTACT</a></li> 
        <li><a href="#">CALCULATORS</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 
</div> 

そして、ナビゲーションバーの背景色の変更のため、私が持っているだけCSS：

.navbar { 
    background-color: transparent; 
    border-color: transparent; 
} 

.navbar-toggle:hover, .navbar-default .navbar-toggle:focus{ 
    background-color: transparent !important; 
} 

Answer 1

これはあなたの現在の関数とCSSがid=startchangeと<div>を持っているページに何をするかです。ページの読み込み時に、ナビゲーションバーは透過的ではありません。スクロールするとすぐにnavbarが透明になり（境界線はまだ表示されます）、<div>とid=startchangeが一番上を通過すると、navbarは再び非透明になります。

あなたのCSSをより具体的にすると、境界線なしで開始するためにnavbarを透明にすることができます（より大きな画面サイズでは、小さい画面ではどのように表示されるかを見たいかもしれません）。

$(document).ready(function(){  
 
    var scroll_start = 0; 
 
    var startchange = $('#startchange'); 
 
    var offset = startchange.offset(); 
 
    if (startchange.length){ 
 
     $(document).scroll(function() { 
 
      scroll_start = $(document).scrollTop(); 
 
      if(scroll_start > offset.top) { 
 
       $(".navbar").css('background-color', '#f0f0f0'); 
 
      } else { 
 
       $('.navbar').css('background-color', 'transparent'); 
 
      } 
 
     }); 
 
    } 
 
});

.navbar.navbar-default.navbar-fixed-top { 
 
    background-color: transparent; 
 
    border-color: transparent; 
 
    -webkit-transition: background-color 2s; /* Safari */ 
 
    transition: background-color 2s; 
 
} 
 

 
.navbar-toggle:hover, .navbar-default .navbar-toggle:focus{ 
 
    background-color: transparent !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
    <nav class="navbar navbar-default navbar-fixed-top"> 
 
     <div class="container-fluid"> 
 
      <div class="navbar-header ">     
 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarNav"> 
 
        <span class="sr-only">Toggle navigation</span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
       </button> 
 
      </div> 
 

 
      <div id="navbarNav" class="navbar-collapse collapse "> 
 
       <br/><br/> 
 
       <ul class="nav navbar-nav navbar-right "> 
 
        <li><a href="#">ABOUT</a></li> 
 
        <li><a href="#">SERVICES</a></li> 
 
        <li><a href="#">CONTACT</a></li> 
 
        <li><a href="#">CALCULATORS</a></li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
    </nav> 
 
    
 
    <div id="page"> 
 
     Page Top 
 
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
 
     <div id="startchange">Start Change Div</div> 
 
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
 
     Page Bottom 
 
    </div> 
 
</div>