粘滯導航欄dö不工作/// stickyfill.js

Question

我有stickyfill.js腳本的問題 - 它不起作用。

這裏是我的代碼：

*{ 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    list-style: none; 
    font-family: Roboto; 

} 
#kontakt{ 
position: absolute; 
right: 25px; 
top: 35px; 
border-bottom: 3px solid black; 
border-right: 3px solid #27ae60; 
box-shadow: 1px 1px 12px grey; 
} 
#kontakt:hover{ 
    box-shadow: 1px 1px 32px grey; 
    border-bottom: 4px solid black; 
border-right: 4px solid #27ae60; 
} 
#kontakt p{ 
    margin: 5px; 
} 

#logo img{ 
    padding: 15px; 
    margin: 5px; 
    width: 25%; 
    display: block; 
} 

#logo img:hover{ 
    width: 26%; 
} 

#navigation{ 
    background-color: blue; 
} 


#navigation nav{ 
    position: sticky; 
    border-bottom: 3px solid #27ae60 ; 
    background-color: #212121; 
    width: 100%; 
    height: 53px; 
} 
#navigation nav a{ 
    display: flex; 
    padding: 15px 50px; 
    float: right; 
    font-size: 18px; 
    color: white; 
    text-decoration: none; 
} 

#navigation nav a:hover{ 
    background-color: #27ae60; 

} 
#column{ 
    width: 100%; 
    height: 750px; 
    border-bottom: 3px solid #212121; 
    box-shadow: 1px 3px 12px grey; 
} 
#navigation nav{ 
    box-shadow: 1px 3px 42px grey; 
} 

#mySlides {display:none} 
#w3-left, .w3-right, .w3-badge {cursor:pointer} 
#w3-badge {height:13px;width:13px;padding:0} 

#icons{ 
    background-image: url('img/bg.jpeg'); 
    position: relative; 
    width: 100%; 
    height: 100%; 
} 

#icons img{ 
    height: 100%; 
    width: 150px; 
} 

#icon1{ 
    padding: 25px; 
    margin-top: 115px; 
    text-align: center; 
    position: absolute; 
    left: 1025px; 
    width: 225px; 
} 
#icon2{ 
    padding: 25px; 
    margin-top: 115px; 
    text-align: center; 
    position: absolute; 
    left: 725px; 
    width: 225px; 
} 
#icon3{ 
    padding: 25px; 
    margin-top: 115px; 
    text-align: center; 
    position: absolute; 
    left: 365px; 
    width: 225px; 
} 
#icon4{ 
    border-bottom: ; 
    padding: 25px; 
    margin-top: 115px; 
    text-align: center; 
    position: absolute; 
    left: 25px; 
    width: 225px; 
} 

#icon4:hover{ 
    border-top: 3px solid #27ae60; 
    border-bottom: 3px solid black; 
    box-shadow: 1px 3px 52px grey; 
} 
#icon1:hover{ 
    border-top: 3px solid #27ae60; 
    border-bottom: 3px solid black; 
    box-shadow: 1px 3px 52px grey; 
} 
#icon3:hover{ 
    border-top: 3px solid black; 
    border-bottom: 3px solid #27ae60; 
    box-shadow: 1px 3px 52px grey; 
} 
#icon2:hover{ 
    border-top: 3px solid black; 
    border-bottom: 3px solid #27ae60; 
    box-shadow: 1px 3px 52px grey; 
} 
#slideshow{ 
    box-shadow: 1px 3px 12px grey; 
    border-bottom: 3px solid #27ae60; 
} 
#opis{ 
    border-top: 2px solid #27ae60; 
    padding: 50px; 
    float: left; 
    position: relative; 
    left: 300px; 
    display: block; 
    text-align: center; 
    height: 200px; 
    box-shadow: 1px 3px 22px grey; 
    top: 500px; 
    width: 670px; 
    padding: 55px; 
} 
#opis:hover{ 
    border-bottom: 2px solid crimson; 
     box-shadow: 1px 3px 22px black; 
} 
footer a{ 
    color: white; 
    text-decoration: none; 
    position: relative; 
    top: 120px; 
    left: 1050px; 
} 
footer{ 
    box-shadow: 1px 3px 32px black; 
    background-color: #27ae60; 
    width: 100%; 
    height: 150px; 
} 
footer a:hover{ 
    text-shadow: 1px 3px 22px black; 
} 
#icons p:hover{ 
    text-shadow: 1px 3px 15px gray; 
} 
#column3{ 
    width: 100%; 
    height: 1052px; 
    background-image: url('img/bg2.jpeg'); 
} 

div#quad { 
    background-color: #000; 
    font-size: 0; 
    width: 95%; 
    margin: 0 auto; 
    box-shadow: 0 0 12px rgba(0,0,0,0.8); 
} 
div#quad figure { 
    margin: 0; width: 50%; 
    height: auto; transition: 1s; 
    display: inline-block; 
    position: relative; 
    overflow: hidden; 
} 
div#quad figure:hover { cursor: pointer; z-index: 4; } 
div#quad figure img { width: 100%; height: auto; } 
div#quad figure:nth-child(1) { transform-origin: top left; } 
div#quad figure:nth-child(2) { transform-origin: top right; } 
div#quad figure:nth-child(3) { transform-origin: bottom left; } 
div#quad figure:nth-child(4) { transform-origin: bottom right; } 
div#quad figure figcaption { 
    margin: 0; opacity: 0; 
    background: rgba(0,0,0,0.3); 
    color: #fff; padding: .3rem; 
    font-size: 1.2rem; 
    position: absolute; 
    bottom: 0; width: 100%; 
    transition: 1s 1s opacity; 
} 
.expanded { transform: scale(2); z-index: 5; } 
div#quad figure.expanded figcaption { opacity: 1; } 
div.full figure:not(.expanded) { pointer-events: none; } 


#galeria a{ 
    background-color: transparent; 
    border: 2px solid #27ae60; 
    margin: 42%; 
    color:white; 
    font-size: 17px; 
    padding:10px; 
    text-decoration: none; 
    border-radius: 25px; 
    box-shadow: 1px 1px 1px 1px black; 
} 

#galeria a:hover{ 
    border-radius: 25px; 
    background-color: #27ae60; 
    border: 2px solid #27ae60; 
    box-shadow: 1px 3px 12px black; 
} 
#galeria{ 
    margin:35px; 
} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<!DOCTYPE html> 
<html lang="pl"> 
<head> 
    <meta charset="utf-8"> 
    <title>Meble AGMAR</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="styles.css"> 
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
    <link rel="icon" href="img/favicon.png" type="image/x-icon"/> 
</head> 
<body> 
    <div id="container"> 
     <header> 
      <div id="logo"> 
       <img src="img/logo.png" alt="logotyp"> 
       <div id="kontakt"> 
       <p>☎ 123-456-123</p> 
       <p>✉ m421234r@mail.pl</p> 
       </div> 

      </div> 
      <div id="navigation"> 
       <nav> 
       <a href="#">Kontakt</a> 
       <a href="#galeria">Galeria</a> 
       <a href="#icons">O nas</a> 
       <a href="#header">Home</a> 
       </nav> 
      </div> 
     </header> 
     <div id="slideshow"> 
      <img class="mySlides" src="img/slider2.jpg" style="width:100%"> 
      <img class="mySlides" src="img/slider4.jpg" style="width:100%"> 
      <img class="mySlides" src="img/slider5.jpg" style="width:100%"> 
      <img class="mySlides" src="img/slider6.jpg" style="width:100%"> 
     </div> 

    <main> 
     <div id="column"> 

      <div id="icons"> 

       <div id="icon1"> 
        <img src="img/czas.png"> 
        <p><b>Na dowolny wymiar 
         </b></p> 
        <p>Nasze meble są projektowane z dokładnością do 1 mm 
         (szerokość, wysokość, głębokość).</p> 
       </div> 

       <div id="icon2"> 

        <img src="img/instrukcja.png"> 
        <p><b>Krótki czas realizacji</b></p> 
       <p>Dołożymy starań, aby zamówiony 
przez Ciebie mebel został 
dostarczony w ciągu 4 dni.</p> 
       </div> 

       <div id="icon3"> 
        <img src="img/medal.png"> 
        <p><b>Wysoka jakość</b></p> 
        <p>Do produkcji używamy wyłącznie najlepszej jakości płyt i akcesoriów od cenionych producentów.</p> 
       </div> 

       <div id="icon4"> 
        <img src="img/wymiar.png"> 
        <p><b>Personalizowane instrukcje</b></p> 
        <p>Indywidualne instrukcje do mebli na wymiar pozwalają na łatwiejszy i szybszy montaż.</p> 
       </div> 
       <div id="opis"> 
      <p>Serdecznie witamy na naszej stronie internetowej. Zapraszamy do skorzystania z naszej oferty. Możemy zaproponować Państwu szeroką gamę mebli kuchennych, które są wykonane z materiałów i systemów najwyższej jakości. Wykonujemy róznież różnego rodzaju szafy, komody, biurka, zabudowę pawlaczy, ściśle według uznań klientów.</p> 
      </div> 
      </div> 

     </div> 

     <div id="column3"> 

     <div id="quad"> 
     <figure> 
      <img src="img/kitchen22.jpg" alt="rose-red-wine"> 
      <figcaption>Kuchnia 1 w stylu takim</figcaption> 
     </figure> 
     <figure> 
      <img src="img/kitchen1.jpg" alt> 
      <figcaption>Kuchnia 2 w stylu srakim</figcaption> 
     </figure> 
     <figure> 
      <img src="img/kitchen3.jpg" alt> 
       <figcaption>Kuchnia 3 w stylu owakim</figcaption> 
     </figure> 
     <figure> 
       <img src="img/kitchen4.jpg" alt> 
      <figcaption>Kuchnia 4 w stylu meliniarskim</figcaption> 
     </figure> 
    </div> 
     <div id="galeria"> 
      <a href="">Zobacz więcej!</a> 
     </div> 

     </div> 
    </main> 

    </div> 
    <footer> 
    <div id="footer"> 

    </div> 
    </footer> 
</body> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
     <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 
     <script src="index.js"></script> 
     <script src="jquery.js"></script> 
     <script src="stickyfill.js"></script> 
<script> 
     $("nav").Stickyfill(); 
       // Select all links with hashes 
$('a[href*="#"]') 
    // Remove links that don't actually link to anything 
    .not('[href="#"]') 
    .not('[href="#0"]') 
    .click(function(event) { 
    // On-page links 
    if (
     location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
     && 
     location.hostname == this.hostname 
    ) { 
     // Figure out element to scroll to 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); 
     // Does a scroll target exist? 
     if (target.length) { 
     // Only prevent default if animation is actually gonna happen 
     event.preventDefault(); 
     $('html, body').animate({ 
      scrollTop: target.offset().top 
     }, 1000, function() { 
      // Callback after animation 
      // Must change focus! 
      var $target = $(target); 
      $target.focus(); 
      if ($target.is(":focus")) { // Checking if the target was focused 
      return false; 
      } else { 
      $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable 
      $target.focus(); // Set focus again 
      }; 
     }); 
     } 
    } 
    }); 
    </script> 


    <!--SLIDER--> 
    <script> 
    var slideIndex = 0; 
    carousel(); 

    function carousel() { 
    var i; 
    var x = document.getElementsByClassName("mySlides"); 
    for (i = 0; i < x.length; i++) { 
     x[i].style.display = "none"; 
    } 
    slideIndex++; 
    if (slideIndex > x.length) {slideIndex = 1} 
    x[slideIndex-1].style.display = "block"; 
    setTimeout(carousel, 5000); 
} 
</script> 



</html> 

Answer 1

位置：粘需要被分配一個rect屬性。給它一個top：0px的值意味着當它在窗口頂部以下0px或滾動上下文時它會變得粘稠。

#navigation nav{ 
    position: sticky; 
    top: 0px; //add this 
    border-bottom: 3px solid #27ae60 ; 
    background-color: #212121; 
    width: 100%; 
    height: 53px; 
}