スクロールするときにナビゲーションバーをスティックにすることができません

私は正面に立っていて、私はUdemyから購入しています。インストラクターは、ブートストラップアルファ4バージョンを使用しているためかもしれない問題は、私はちょうどページの最上部にナビゲーションバーのためのpostion:fixedを設定することはできません、私のナビゲーションバーが970pxマージントップを持っている、と私はしたいスクロールしたとき、私はアルファ6スクロールするときにナビゲーションバーをスティックにすることができません

を使用して、ですnavは上から970px、下からは971pxです。これは問題です。

enter image description here

index.htmlファイル：ここでは、ナビゲーションバーの写真です

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/css/tether.min.css"> 
<link rel="stylesheet" type="text/css" href="css/font-awesome/css/font-awesome.min.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"> 
<link rel="stylesheet" type="text/css" href="css/style.css"> 
<title>First website</title> 
</head> 

<body> 
    <section id="cover"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-sm-3"> 
        <div class="lead wall-sticker"> 
         we. <br> plant. <br> trees. <br> 
         <a href="#"> 
          <button type="button" class="btn btn-success-outline my-2 my-sm-0 text-white">Learn more</button> 
         </a> 
        </div> 
       </div> 
       <div class="col-sm-9"> 
        <h1 class="moto">For <span class="bold-green">every</span> item sold, we plant 1 tree.<br><br>Want to become a <span class="green-underline">part</span> of it?</h1> 
        <a href="#"><i class="fa fa-arrow-down"></i></a> 
       </div> 
      </div> 
     </div> 
    </section> 
    <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse" id="main-nav"> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> 
     <script src="js/jquery-3.2.1.min.js"></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> 
     <script src="js/main.js"></script>

私はmain.jsファイルを持っている、があります。

$(document).ready(function() { 
    $(window).scroll(function() { 
    if ($(window).scrollTop() > 970) { 
     $('.navbar').addClass('navbar-fixed-top'); 
    } 
    if ($(window).scrollTop() < 971) { 
     $('.navbar').removeClass('navbar-fixed-top'); 
    } 
    }) 
});

出典

2017-05-25 Nikola Trajkovic

CSSを使ってみましたか？ページの先頭に要素を固執する

：

position: -webkit-sticky; position: sticky; top: 0;

出典

2017-05-25 21:43:22 RSproule

私は今試みたが、助けようにあなたに感謝し、助けにはなりませんでした。 –

スクロールするときにナビゲーションバーをスティックにすることができません

答えて

関連する問題