隐藏/显示导航栏无法正常工作

时间：2018-04-18 19:34:23

标签： javascript jquery html css bootstrap-4

我似乎无法做到这一点。我已经找了几个小时寻找解决方案。

我需要移除位置：固定;为了让我的navBar在菜单打开时按下内容。问题是现在当我向下滚动时，导航栏会按原样消失，但是当我向后滚动时它会立即重新出现。相反，只有当我到达页面顶部时它才会重新出现。此行为仅在position：fixed时开始;被评论出来了。任何有关我如何解决这个问题的见解将不胜感激。

HTML：

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial- scale=1.0">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="portfolio2.css">

  <!-- <script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script> -->

  <title>Portfolio 2</title>

</head>

<body>
  <header id="masthead" class="nav-down">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Vernon Blankenhorn</a>
      <button id="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav"><span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="#">About Me <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Portfolio</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </nav>
  </header>

  <div id="alpha">
    <div id="text" class="container pt-5">
      <p>Proin eget tortor risus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ante ipsum primis          in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit            amet ligula. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Cras ultricies ligula sed magna dictum porta.              Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur non nulla sit amet nisl tempus convallis quis ac              lectus.
      </p>

      <p>Curabitur aliquet quam id dui posuere blandit. Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta. Sed            porttitor lectus nibh. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ante ipsum primis          in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit            amet ligula.
      </p>

      <p>Nulla quis lorem ut libero malesuada feugiat. Proin eget tortor risus. Donec rutrum congue leo eget malesuada. Vivamus magna          justo, lacinia eget consectetur sed, convallis at tellus. Donec rutrum congue leo eget malesuada. Cras ultricies ligula sed          magna dictum porta.
      </p>

      <p>Donec sollicitudin molestie malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur non          nulla sit amet nisl tempus convallis quis ac lectus. Donec rutrum congue leo eget malesuada. Vivamus suscipit tortor eget            felis porttitor volutpat. Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor                volutpat. Donec rutrum congue leo eget malesuada.
      </p>

      <p>Pellentesque in ipsum id orci porta dapibus. Pellentesque in ipsum id orci porta dapibus. Lorem ipsum dolor sit amet,                consectetur adipiscing elit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Sed porttitor lectus            nibh. Curabitur aliquet quam id dui posuere blandit. Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit,            eget tincidunt nibh pulvinar a. Pellentesque in ipsum id orci porta dapibus. Proin eget tortor risus.
      </p>

      <p>Pellentesque in ipsum id orci porta dapibus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec            rutrum congue leo eget malesuada. Sed porttitor lectus nibh. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.            Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla quis lorem ut libero malesuada feugiat. Pellentesque in            ipsum id orci porta dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec            velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Mauris blandit aliquet elit, eget tincidunt nibh              pulvinar a.
      </p>

      <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Mauris blandit aliquet elit, eget tincidunt nibh              pulvinar a. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget                  tincidunt nibh pulvinar a. Pellentesque in ipsum id orci porta dapibus. Vivamus magna justo, lacinia eget consectetur sed,            convallis at tellus. Curabitur aliquet quam id dui posuere blandit.
      </p>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Sed            porttitor lectus nibh. Cras ultricies ligula sed magna dictum porta. Mauris blandit aliquet elit, eget tincidunt nibh                pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sapien massa, convallis a pellentesque nec,            egestas non nisi. Donec rutrum congue leo eget malesuada. Quisque velit nisi, pretium ut lacinia in, elementum id enim.              Quisque velit nisi, pretium ut lacinia in, elementum id enim.
      </p>

      <p>Donec rutrum congue leo eget malesuada. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Praesent sapien            massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Praesent sapien massa, convallis          a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla quis              lorem ut libero malesuada feugiat.
      </p>

      <p>Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus suscipit                rices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Donec rutrum                congue leo eget malesuada. Nulla porttitor accumsan tincidunt. Praesent sapien massa, convallis a pellentesque nec, egestas          non nisi.
      </p>

      <p> Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec rutrum congue leo eget malesuada. Vivamus suscipit             tortor eget felis porttitor volutpat. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur aliquet quam           id dui posuere blandit. Donec rutrum congue leo eget malesuada.
      </p>

      <p>Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur aliquet quam id dui posuere blandit. Lorem ipsum              dolor sit amet, consectetur adipiscing elit. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl          tempus convallis quis ac lectus. Nulla porttitor accumsan tincidunt. Donec sollicitudin molestie malesuada. Praesent sapien          massa, convallis a pellentesque nec, egestas non nisi. Quisque velit nisi, pretium ut lacinia in, elementum id enim.
      </p>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.bundle.min.js"></script>
  <script type="text/javascript" src="portfolio2.js"></script>
</body>
</html>

CSS：

p {
  color: white;
}

.navbar-toggler{
  border: none!important;
}

.navbar-toggler:hover, .navbar-toggler:focus {
  outline: 2px solid gray;
}

#masthead {
/*   position: fixed; */
  top: 0;
  left: 0;
  transition: transform 450ms ease;
  width: 100%;
}

.nav-up {
  transform: translateY(-100%)
}

/* .bg {
  /* The image used
  background-image: url("https://cdn42.picsart.com/167005229000201.jpeg?r1024x1024");
} */

html, body{
  height: 100%;
}
body {
    background-image: url(https://cdn42.picsart.com/167005229000201.jpeg?r1024x1024) ;
    background-position: center center;
    background-repeat:  no-repeat;
    background-attachment: fixed;
    background-size:  cover;
    background-color: #999;
/*   padding-top: 56px; */
}

#alpha{
  background: rgba(0, 0, 0, .8);
}

/* .myClass {
  transition: transform 400ms ease;
  transform: translateY(5%);
} */

JavaScript的：

// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();

$(window).scroll(function(event) {
    didScroll = true;
});

// How long should we listen to the scroll before acting?
setInterval(function() {
  if (didScroll) {
      hasScrolled();
      didScroll = false;
  }
}, 100);


function hasScrolled() {
  var st = $(this).scrollTop();

  // Make sure they scroll more than delta
  if(Math.abs(lastScrollTop - st) <= delta)
      return;

  // If they scrolled down and are past the navbar, add class .nav-up.
  // This is necessary so you never see what is "behind" the navbar.
  if (st > lastScrollTop && st > navbarHeight) {
      // Scroll Down
      $('#masthead').removeClass('nav-down').addClass('nav-up');
  } else {
      // Scroll Up
      if(st + $(window).height() < $(document).height()) {
          $('#masthead').removeClass('nav-up').addClass('nav-down');
      }
  }

  lastScrollTop = st;
}

 $('#button').on('click', function() {
   $('#alpha').toggleClass('myClass');
});

// $('#button').on("click", function() {
//    $('#alpha').slideToggle(1000);
//  });

如果我把位置：固定;回来，我的问题已得到解决，但是当菜单打开时，内容不再被按下。相反，navBar重叠内容并且不会将其推下。有没有办法解决这个问题，而不只是简单地添加填充？在此先感谢您的帮助！

这是一个小提琴：

JSFiddle

0 个答案:

没有答案
相关问题
最新问题