我無法在滾動時將導航欄粘貼到頂部

我是前排新手，我從Udemy購買和跟隨課程。也許問題是因爲教師用於引導阿爾法4版，我使用alpha 6我無法在滾動時將導航欄粘貼到頂部

我不能只建立postion:fixed與頁面的頂部導航欄中，我的導航欄有970像素緣頂部，當我滾動希望nav從頂部和底部971px是970px，這是問題。這裏是導航欄的圖片：

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

我想，現在，沒有幫助，謝謝你盡力幫助。 –

我無法在滾動時將導航欄粘貼到頂部

回答

相關問題