粘性导航栏不起作用/// 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

position：sticky需要分配rect属性。给它一个top值：0px意味着当它比窗口顶部或滚动上下文低0px时会变粘。

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