已更新

Question

我的粘性导航栏已经消失，文字在视频上方，应该从它下面开始。

https://github.com/shanegibney/stackoverflowStickynavbarIssue

那里也有一个gh-pages链接。

基本上有一个视频最初占据整个屏幕，滚动时会在视频下方显示一个导航栏。当用户继续滚动时，导航栏到达屏幕顶部，它应该粘在屏幕顶部，始终可见。就像典型的粘性导航栏行为一样，例如https://www.w3schools.com/howto/howto_js_navbar_sticky.asp

目前根本看不到导航栏。这工作得早，我不知道我做了什么来改变它。

非常感谢任何帮助或建议，

由于

＆＃13;

$(document).ready(function() {
  // Custom
  // function which toggles between sticky class(is - sticky)
  var stickyToggle = function(sticky, stickyWrapper, scrollElement) {
    var stickyHeight = sticky.outerHeight();
    var stickyTop = stickyWrapper.offset().top;
    if (scrollElement.scrollTop() >= stickyTop) {
      stickyWrapper.height(stickyHeight);
      sticky.addClass("is-sticky");
    } else {
      sticky.removeClass("is-sticky");
      stickyWrapper.height('auto');
    }
  };

  // Get the navbar
  var navbar = document.getElementById("navbar");

  // Get the offset position of the navbar
  var sticky = navbar.offsetTop;

  // Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
  function myFunction() {
    if (window.pageYOffset >= sticky) {
      navbar.classList.add("sticky")
    } else {
      navbar.classList.remove("sticky");
    }
  }

  $('.SeeMore').click(function() {
    var $this = $(this);
    // $this.toggleClass('SeeMore2');
    if ($this.hasClass('.SeeMore')) {
      console.log("aaa");
      $this.removeClass('.SeeMore')
      $this.addClass('.SeeMore2')
      $this.text('READ MORE');
    } else {
      console.log("bbb");
      $this.removeClass('.SeeMore2')
      $this.addClass('.SeeMore')
      $this.text('READ LESS');
    }
  });

  $('[data-toggle="sticky-onscroll"]').each(function() {
    var sticky = $(this);
    var stickyWrapper = $('<div>').addClass('sticky-wrapper'); // insert hidden element to maintain actual top offset on page
    sticky.before(stickyWrapper);
    sticky.addClass('sticky');

    // Scroll & resize events
    $(window).on('scroll.sticky-onscroll resize.sticky-onscroll', function() {
      stickyToggle(sticky, stickyWrapper, $(this));
    });

    // On page load
    stickyToggle(sticky, stickyWrapper, $(window));
  });
});

＆＃13;

.container-fluid{
   padding: 0 0px !important;
}

.logo{
  /* padding-left: 130px; */
  margin-left: 50px;
}

.borderme {
  padding:0px;
  spacing: 0px;
  margin-right: 0px;
  margin-left: 0px;
}

#about{
  /* position:relative; */
  position:absolute; top:-150px;
}

#archive{
  position:relative; top:-0px;
}

.navs{
  font-size: 25px;
  padding-left: 9%;
  padding-right: 11%;
  margin-top: auto;
  margin-bottom: auto;
  vertical-align: middle;
}

body {
  min-height: 1200px;
}

nav {
  background: #fff;
  min-height: 85px;
}

.home {
    width: 1280px;
    height: 20px;
    background-color: aqua;
}

/* .sticky {
    position: fixed;
    top: 0;
    width: 100%
} */
/* Style the navbar */
.seeds{
  color: white;
  text-align: right;
}

#navbar {
  border: 2px solid pink;
  width:100%;
  overflow: hidden;
  background-color: #fff;
  padding-bottom: 0px;
  border-bottom: 1px solid black;
}

/* Navbar links */

#navbar a {
    display: inline;
    color: black;
    text-align: right;
    text-decoration: none;
    /* height: 30px; */
}

#myVideo {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    /* height: 200px; */
}

#countup p {
    display: inline-block;
    color: white;
}

.menu-item{
  /* vertical-align: middle; */
  margin-top: auto;
  margin-bottom: auto;
  padding-left: 50px;
}

#menu-link{
  vertical-align: middle;
  color:red;
}

.navbar-right{
  left: 0;
}

.navbar-brand
{
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    margin:0 auto;
}
.navbar-toggle {
    z-index:3;
}

.about {
    padding: 0px;
    font-size: 35px;
}

.archive {
    margin-top: 90px;
}

hr{
  border-color: #EEEEEE -moz-use-text-color #FFFFFF;
  border-style: solid none;
  border-width: 7px 0;
  margin: 0px 0;
}

.archivetitle{
  font-size: 60px;
  margin-bottom: 0px;
}
.archive-text {
    margin-bottom: 30px;
    font-size: 20px;
}

.archive-search {
    background-color:black;
}

.first-archive {
    margin-top: 60px;
}

.habitat-names {
    padding-top: 120px;
    margin-bottom: 60px;
}

.archive-name {
    margin-top: 30px;
}

.archive-flower-name {
    color: white;

}

hr {
    border-top: 2px solid white;
}

.btn-archive {
    margin-top: 60px;
    margin-left: auto;
    margin-right: auto;
}

.search-text {
    color: white;
}

.search-text:hover { COLOR: green; }

.footer {
    height: 300px;
    /* background-color: coral; */
}

.collapse-container {
    padding-bottom: 60px;
}

.btn-archive {
    border-radius: 0px!important;
    background-color: black;
    color: white;
    margin-top: 60px;
    margin-left: auto;
    margin-right: auto;
    padding: 15px;
}


.common{
  margin-top: auto;
  margin-bottom: auto;
}

.commontext{
    padding-left: 10px;
    font-size: 15px;
}

＆＃13;

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Sticky navbar3</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <!--top header-->
  <div class="container home" id="home">
    <div class="row">
      <video autoplay muted loop id="myVideo">
          <source src="Time-Lapse.mp4" type="video/mp4">
      </video>
      <div class="col-md-2 logo"><img style="margin-top: 20px; margin-left:0px; padding:0px;" class="img-fluid" src="Logo_01.png" />
      </div>
      <div class="col-md-7">

      </div>
      <div class="col-2">
        <div class="seeds" id="countup">
          <div style="font-size:60px; text-align: center;" id="days"></div>
          <div style="font-size:20px; text-align: center;" id="seeds"></div>
        </div>
      </div>
    </div>
  </div>

  <div class="container-fluid borderme" data-toggle="sticky-onscroll" id="navbar">
    <div class="d-flex navs">
      <div class="mr-auto p-2">
        <img height="70px" src="/icons/Flora_Logo.png">
      </div>
      <div class="p-2 menu-item">
        <a href="#about"><strong>ABOUT</strong></a>
      </div>
      <div class="p-2 menu-item">
        <a class="menu-item" href="#shiftdown"><strong>ARCHIVE</strong></a>
      </div>
      <div class="p-2 menu-item">
        <a class="menu-item" href="#publication"><strong>PUBLICATION</strong></a>
      </div>
      <div class="p-2 menu-item">
        <a class="menu-item" href="#sign-in"><strong>SIGN-IN</strong></a>
      </div>
    </div>
  </div>


  <!-- About Container -->
  <div class="container about" id="content">
    <div class="row">
      <div class="col-12">
        <span id="about"></span>
        <span style="color:white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit </span>        Flora is a seed repository dedicated to collecting<sup>(1)</sup>, archiving<sup>(2)</sup> and distributing<sup>(3)</sup> native Irish wildflowers. Over 100 native Irish plants are now classified as endangered. Flora is essential in preventing
        disease, climate change, and biodiversity loss. We rely on the support of people to assist in the re-introduction of these wildlflowers across Ireland by distributing seeds in their local area.
      </div>
    </div>
    <!-- <h3 class="read-more">READ MORE</h3> -->
    <div class="row">
      <div class="col-12 collapse" id="aboutshow">
        Flora is a seed repository dedicated to collecting(1), archiving(2) and distributing(3) native Irish wildflowers. Over 100 native Irish plants are now classified as endangered. Flora is essential in preventing disease, climate change, and biodiversity
        loss. We rely on the support of people to assist in the re-introduction of these wildlflowers across Ireland by distributing seeds in their local area.
      </div>
    </div>
    <button type="button" class="btn btn-archive SeeMore" data-toggle="collapse" data-target="#aboutshow">READ MORE</button>
  </div>

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script src="script.js"></script>
  <script>
    window.onscroll = function() {
      myFunction()
    };

    var navbar = document.getElementById("navbar");
    var sticky = navbar.offsetTop;

    function myFunction() {
      if (window.pageYOffset >= sticky) {
        navbar.classList.add("sticky")
      } else {
        navbar.classList.remove("sticky");
      }
    }
  </script>

  <script>
    window.onload = function() {
      upTime();
    }

    function upTime(countTo) {

      var num = Math.floor(Math.random() * 2500) + 1500;

      timeout();

      function numberWithCommas(x) {
        x = x.toString();
        var pattern = /(-?\d+)(\d{3})/;
        while (pattern.test(x))
          x = x.replace(pattern, "$1,$2");
        return x;
      }

      function timeout() {
        setTimeout(function() {
          num++;
          number = numberWithCommas(num);
          // document.getElementById('days').firstChild.nodeValue = number;
          document.getElementById('days').innerHTML = number;
          document.getElementById('seeds').innerHTML = "Seeds Planted";

          timeout();
        }, 1000);
      }
    }

    function refreshFunction() { // reloads the entire page as if newly opening it
      location.reload();
    }
  </script>
</body>

</html>

＆＃13;

Answer 1

已更新

我刚检查了你的github链接，我发现你的代码中有一些缺失的部分

类.home需要让position:relative; height:100vh获取视口的完整高度，以便能够测试粘性导航栏，另外还要禁用它应该是的粘性样式像那样

.sticky {
  position: fixed;
  top: 0;
  width: 100%
}

你可以在codepen上查看

如果有帮助，请告诉我

http://codepen.io/AElkhodary/full/KReoYQ/

Answer 2

我正在努力解决同一问题，以使其在整个页面的其余部分保持粘性。因此，在这里我意识到了： display: sticky;仅在其父容器周围发粘。 例如，如果您将此属性应用于标题/另一个div容器内的navbar，则如果您注意到滚动速度变慢，它将停留1-5px。在这种情况下，为了使其在整个页面上都具有粘性，您可以将sticky属性应用于导航栏容器，该容器是<body>的子标记。

sticky和fixed属性之间的主要区别是：在滚动并固定后，顶部的sticky始终位于顶部。前面提到的使用fixed属性来避免麻烦的答复。

粘性导航栏消失了

2 个答案:

已更新