Липкий навбар исчезает - PullRequest
Новая
       11

Липкий навбар исчезает

0 голосов
/ 13 мая 2018

Моя липкая навигационная панель исчезла, а текст поверх видео, которое должно начинаться под ним.

https://github.com/shanegibney/stackoverflowStickynavbarIssue

Там тоже есть ссылка на gh-pages.

По сути, есть видео, которое изначально занимает весь экран, и при прокрутке сразу появляется видео под панелью навигации. Когда пользователь продолжает прокручивать, панель навигации достигает верхней части экрана, где она должна придерживаться верхней части экрана, оставаясь всегда видимой. Точно так же, как типичное поведение липкой навигационной панели, как https://www.w3schools.com/howto/howto_js_navbar_sticky.asp

В данный момент навигационная панель вообще не видна. Это работало раньше, и я не знаю, что я сделал, чтобы изменить это.

Любая помощь или предложения будут с благодарностью,

Спасибо 

$(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));
  });
});
.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;
}
<!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>

Ответы [ 2 ]

0 голосов
/ 16 мая 2018

ОБНОВЛЕНО

Я только что проверил вашу ссылку на github и увидел, что в вашем коде есть некоторые недостающие части

класс .home должен иметь position:relative; height:100vh, чтобы взять полную высоту окна просмотра, чтобы иметь возможность проверить sticky navbar плюс вы отключили липкие стили, которые должны быть такими 

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

Вы можете проверить это на codepen

Пожалуйста, дайте мне знать, если это поможет 

http://codepen.io/AElkhodary/full/KReoYQ/
0 голосов
/ 13 мая 2018

Вы прокомментировали липкий класс. 

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

С этим, функциональность несколько в месте. Это может быть то, что вы изменили?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...