1. ホーム
  2. 質問と答え
  3. スクロール時にブートストラップnavbarを表示しない

スクロール時にブートストラップnavbarを表示しない

2017-08-29 7 views
2

スクロールダウン中にブートストラップナビバーを表示/非表示しようとしていますが、動作しないようです。私は立ち往生しており、本当にここでいくつかの助けに感謝します。誰かが私が間違っていることを教えてもらえますか？私はブートストラップの使い方を学んでいて、jQueryに関する知識はほとんど知りません。 ブラウザコンソールでコードをチェックすると、エラーは表示されません。 私はまた、fadeInとfadeOutを試しただけでなく、運がないaddClassとremoveClass関数も試しました。スクロール時にブートストラップnavbarを表示しない

$(document).ready(function() { 
 

 
    var banner = $("#navscroll"); 
 
    $(window).scroll(function() { 
 
    var scroll = $(window).scrollTop(); 
 
    if (scroll >= banner.height()) { 
 
     $("#banner").hide(); 
 

 
    } else { 
 
     $("banner").show(); 
 
    } 
 
    }); 
 

 
}); 
 

 
console.log();
body { 
 
    background-color: azure; 
 
} 
 

 
.divi { 
 
    width: 500px; 
 
    height: 500px; 
 
} 
 

 
#divi1 { 
 
    background-color: red; 
 
} 
 

 
#divi2 { 
 
    background-color: greenyellow; 
 
}
<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <!-- Required meta tags --> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 

 
    <!-- Bootstrap CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
    <!-- Stylesheet for Mysite --> 
 

 

 
    <title>My Site</title> 
 

 
</head> 
 

 
<body> 
 

 
    <!-- Banner --> 
 
    <div id="banner" class="container-fluid"> 
 
    <nav id="navscroll" class="navbar navbar-toggleable-sm navbar-light fixed-top"> 
 
     <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> 
 
      <span class="navbar-toggler-icon"></span> 
 
      </button> 
 
     <a class="navbar-brand" href="#">My Site</a> 
 
     <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> 
 
     <div class="navbar-nav"> 
 
      <a class="nav-item nav-link active" href="#">Me<span class="sr-only">(current)</span></a> 
 
      <a class="nav-item nav-link" href="#">What I do</a> 
 
      <a class="nav-item nav-link" href="#">Find Me</a> 
 
     </div> 
 
     </div> 
 
    </nav> 
 
    </div> 
 
    <!-- Banner --> 
 

 
    <!-- Divs --> 
 
    <div class="container-fluid"> 
 
    <div id="divi1" class="divi"></div> 
 
    <div id="divi2" class="divi"></div> 
 
    </div> 
 
    <!-- Divs --> 
 

 

 

 
    <!-- jQuery first, then Tether, then Bootstrap JS. --> 
 

 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
</body> 
 

 
</html>

出典

2017-08-29 AtlantisNaranja

+0

あなたは '$（ "バナー"）で'＃ 'を忘れてしまったショー（）;' –

+0

これはhttp://jsfiddle.net/nwV2r/699/ –

+0

Sanchit Patiyalを助けますこれに感謝します。私は自分のコードで実装しようとしていますが、うまくいきません。 – AtlantisNaranja

答えて

1

ホープ：

  1. ライン$("banner").show(); =>banner前に欠落している「＃」があります。
  2. 要素を非表示にすると、高さが保持されません。したがって、既に隠れた後にヌバーバの高さをテストすると、予期しない結果が発生します。したがって、事前に高さを保存し、保存された変数と比較することをお勧めします。

固定コードは、次のとおり

$(document).ready(function() { 
 
    var banner_height = $("#navscroll").height(); 
 
    var lastScrollTop = 0; 
 
    $(window).scroll(function() { 
 
    var scroll = $(window).scrollTop(); 
 
    var currScrollTop = $(this).scrollTop(); 
 
    if (scroll >= banner_height && currScrollTop > lastScrollTop) { 
 
     $("#banner").hide(); 
 
    } else { 
 
     $("#banner").show(); 
 
    } 
 
    lastScrollTop = currScrollTop; 
 

 
    }); 
 

 
});
body { 
 
    background-color: azure; 
 
} 
 

 
.divi { 
 
    width: 500px; 
 
    height: 500px; 
 
} 
 

 
#divi1 { 
 
    background-color: red; 
 
} 
 

 
#divi2 { 
 
    background-color: greenyellow; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <!-- Required meta tags --> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 

 
    <!-- Bootstrap CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
    <!-- Stylesheet for Mysite --> 
 

 
    <title>My Site</title> 
 

 
</head> 
 

 
<body> 
 

 
    <!-- Banner --> 
 
    <div id="banner" class="container-fluid"> 
 
    <nav id="navscroll" class="navbar navbar-toggleable-sm navbar-light fixed-top"> 
 
     <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> 
 
      <span class="navbar-toggler-icon"></span> 
 
      </button> 
 
     <a class="navbar-brand" href="#">My Site</a> 
 
     <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> 
 
     <div class="navbar-nav"> 
 
      <a class="nav-item nav-link active" href="#">Me<span class="sr-only">(current)</span></a> 
 
      <a class="nav-item nav-link" href="#">What I do</a> 
 
      <a class="nav-item nav-link" href="#">Find Me</a> 
 
     </div> 
 
     </div> 
 
    </nav> 
 
    </div> 
 
    <!-- Banner --> 
 

 
    <!-- Divs --> 
 
    <div class="container-fluid"> 
 
    <div id="divi1" class="divi"></div> 
 
    <div id="divi2" class="divi"></div> 
 
    </div> 
 
    <!-- Divs --> 
 

 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
</body> 
 

 
</html>

出典

2017-08-29 09:45:23 Tomer

+0

ありがとうございます。それは魅力のように機能します！なぜ私はこれを見ることができなかったのか分からない。 – AtlantisNaranja

+0

私は助けてくれると嬉しいです。 – Tomer

+0

申し訳ありません@Tomer、もう一つ。スクロール位置に関係なくスクロールすると、ナビゲーションバーが表示されません。私がページの上部にいるかどうかだけを示します。これをどうすれば解決できますか？ありがとう – AtlantisNaranja

0

スクロール機能外のバナーの高さを定義しようともあなたは＃を忘れてしまった、あなたのスクリプトは、この

$(document).ready(function(){ 

       var banner = $("#navscroll"); 
       var bannerHeight = banner.height(); 
       $(window).scroll(function(){ 
        var scroll = $(window).scrollTop(); 
        if (scroll >= bannerHeight){ 
         $("#banner").hide(); 
        } else { 
         $("#banner").show(); 
        } 
       }); 

     });

出典

2017-08-29 09:43:24 user8262087

0

のように見える私はあなたのためのコードを修正し、いくつかを追加しましたコメント、 コンソールを開き、スクロールして何が起こっているかを確認してください。

基本的に、スクロールの高さをバナーの高さと比較していましたが、それは隠れてしまったので40から-16に変更されています。

 $(document).ready(function(){ 
      var banner = $("#navscroll"); 
      var bannerStartHeight = $("#navscroll").height(); 
      $(window).scroll(function(){ 
       var scroll = $(window).scrollTop(); 
       console.log("SCROLL: "+scroll) 
       console.log("BANNER HEIGHT:"+banner.height()) 
       console.log("BANNER START HEIGHT: "+bannerStartHeight) 
       if (scroll >= bannerStartHeight){ 
        $("#banner").hide(); 
       } else { 
        $("#banner").show(); //here u forgot a # 
       } 
      }); 
    });

は、それがスクロールアップ時にバックナビゲーションバーを示すから、あなたのコードを防ぐ2つの問題があります。

出典

2017-08-29 09:44:36 bonbonvoyage

0

Banner heightがscroll関数外計算されるべきです。

$(document).ready(function() { 
 

 
    var banner = $("#navscroll"); 
 
    var bannerHgt = banner.height(); 
 
    $(window).scroll(function() { 
 
    var scroll = $(window).scrollTop(); 
 
    if (scroll >= bannerHgt) { 
 
     $("#banner").hide(); 
 
    } else { 
 
     $("#banner").show(); 
 
    } 
 
    }); 
 

 
}); 
 

 
console.log();
body{ 
 
    
 
      background-color: azure; 
 
     } 
 

 
     .divi{ 
 

 
      width: 500px; 
 
      height: 500px; 
 
     } 
 

 
     #divi1{ 
 

 
      background-color: red; 
 
     } 
 

 
     #divi2{ 
 

 
      background-color: greenyellow; 
 
     }
<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <!-- Required meta tags --> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 

 
    <!-- Bootstrap CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
    <!-- Stylesheet for Mysite --> 
 
     
 
     
 
    <title>My Site</title> 
 
      
 
    </head> 
 
      
 
    <body> 
 
     
 
    <!-- Banner --> 
 
    <div id="banner" class="container-fluid"> 
 
     <nav id="navscroll" class="navbar navbar-toggleable-sm navbar-light fixed-top"> 
 
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> 
 
      <span class="navbar-toggler-icon"></span> 
 
      </button> 
 
      <a class="navbar-brand" href="#">My Site</a> 
 
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> 
 
      <div class="navbar-nav"> 
 
       <a class="nav-item nav-link active" href="#">Me<span class="sr-only">(current)</span></a> 
 
       <a class="nav-item nav-link" href="#">What I do</a> 
 
       <a class="nav-item nav-link" href="#">Find Me</a> 
 
      </div> 
 
      </div> 
 
     </nav> 
 
    </div> 
 
    <!-- Banner --> 
 
    
 
    <!-- Divs --> 
 
    <div class="container-fluid"> 
 
     <div id="divi1" class="divi"></div> 
 
     <div id="divi2" class="divi"></div> 
 
    </div> 
 
    <!-- Divs --> 
 
     
 
    
 

 
    <!-- jQuery first, then Tether, then Bootstrap JS. --> 
 
    
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
    </body> 
 
</html>

出典

2017-08-29 09:48:22

関連する問題

 関連する問題