个人中心
gpt4 book ai didi

javascript - 向上滚动时隐藏和显示导航栏

转载 作者：行者123 更新时间：2023-11-28 04:29:55 25 4
gpt4 key购买 nike

我想改进现有的代码，该代码允许我在页面加载后显示导航栏，并在用户向下滚动后它消失。我想让导航栏在用户每次向上滚动时出现。基本上，我需要一个 Headroom plugin ，但作为纯 JavaScript。我会考虑任何其他简单的替代方案。

这是一些 HTML 和 Javascript 本身:

//hide and show navbar when scrolled <100px
(function($) {
  $(document).ready(function() {

    // hide .navbar first
    $(".navbar").show();

    // fade in .navbar
    $(function() {
      $(window).scroll(function() {
        // set distance user needs to scroll before we fadeIn navbar
        if ($(this).scrollTop() > 100) {
          $('.navbar').fadeOut();
        } else {
          $('.navbar').fadeIn();
        }
      });


    });

  });
}(jQuery));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<header class="nav-down">
  <nav class="navbar navbar-default navbar-fixed-top container-fluid" id="navbar-exe" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-2">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
        <a class="navbar-brand logo page-scroll text-muted" href="#Home">VAYNER<span class="medialogo">MEDIA</span></a>
      </div>
      <div class="collapse navbar-collapse " id="navbar-collapse-2">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#About" class="page-scroll">About</a></li>
          <li><a href="#Services" class="page-scroll">Contact</a></li>

        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
  </nav>
  <!-- /.navbar -->
</header>

最佳答案

使用headroom.js (正常方式)(不是纯JS，但应该适用于OP):

重要说明:

  • 标题必须固定在顶部(Bootstrap 导航栏类.navbar-fixed-top)
  • 需要 CSS 样式来留出余量来执行任何操作(它只是添加/删除类)
  • 如果使用 jQuery 插件，则必须先加载该插件 (jQuery.headroom.js)

var headroom = new Headroom(document.getElementById("navbar"));
headroom.init();
.headroom {
    will-change: transform;
    transition: transform 200ms linear;
    
}
.headroom--pinned {
    transform: translateY(0%);
}
.headroom--unpinned {
    transform: translateY(-100%);
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://npmcdn.com/headroom.js@0.9.3/dist/headroom.min.js"></script>
</head>
<body>

<nav id="navbar" class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>
  
<div class="container">
  <h3>Ripped from W3Schools' Collapsible Navbar example</h3>
  <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam odio ex, convallis sit amet neque congue, mattis fermentum nunc. Nunc rutrum ex id massa maximus sodales. Aenean semper leo erat. Vivamus vitae vestibulum ex, sed imperdiet eros. Suspendisse pretium urna vel lacus faucibus porta. Mauris suscipit nec ipsum sed egestas. Mauris in dolor nulla. Suspendisse eleifend sit amet nisi et volutpat. Pellentesque mollis cursus eros sed hendrerit. Aliquam imperdiet fringilla fringilla. Sed elit dolor, gravida sollicitudin condimentum sollicitudin, eleifend lobortis dolor. Sed et felis commodo metus pretium condimentum ac eu tellus.
</p>
<p>
Proin volutpat nec ipsum venenatis vulputate. Aenean et erat a risus elementum mollis eu a neque. Integer congue orci tellus, sed mattis neque sollicitudin quis. Ut nec massa massa. Morbi eget aliquam urna. Etiam vitae eros id enim ultrices hendrerit. Quisque at arcu eros. Pellentesque at erat et sem imperdiet pharetra.
</p>
<p>
Suspendisse potenti. Phasellus vel leo nec ante feugiat suscipit sit amet quis nibh. Morbi at tempus nisi. Morbi posuere non sem sed mollis. Vestibulum a tellus nisl. Nunc mi augue, pharetra in congue sed, hendrerit eget neque. Proin rutrum, arcu non venenatis fermentum, justo nisl ultricies elit, ac congue ipsum dolor lobortis dui. Duis interdum sit amet enim vitae vestibulum. Duis tincidunt urna at lorem tristique molestie. Fusce mollis, diam ut rhoncus iaculis, tortor augue accumsan nisl, nec pharetra massa ligula ut erat. Praesent tincidunt leo quis pellentesque pellentesque. Praesent pellentesque magna in felis feugiat auctor euismod ac tortor.
</p>
<p>
Etiam interdum egestas consectetur. Fusce tincidunt, sapien finibus consequat eleifend, mauris libero varius nunc, eget suscipit ligula augue id est. Sed porta nisi vitae massa commodo ornare. Aliquam erat volutpat. Vestibulum dapibus leo dolor, nec porttitor eros viverra non. Vestibulum consequat nisl sed interdum dictum. Praesent ut nisi sed nibh feugiat consectetur a et risus. Integer euismod arcu sapien, vel molestie erat convallis vel. Suspendisse potenti.
</p><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam odio ex, convallis sit amet neque congue, mattis fermentum nunc. Nunc rutrum ex id massa maximus sodales. Aenean semper leo erat. Vivamus vitae vestibulum ex, sed imperdiet eros. Suspendisse pretium urna vel lacus faucibus porta. Mauris suscipit nec ipsum sed egestas. Mauris in dolor nulla. Suspendisse eleifend sit amet nisi et volutpat. Pellentesque mollis cursus eros sed hendrerit. Aliquam imperdiet fringilla fringilla. Sed elit dolor, gravida sollicitudin condimentum sollicitudin, eleifend lobortis dolor. Sed et felis commodo metus pretium condimentum ac eu tellus.
</p>
<p>
Proin volutpat nec ipsum venenatis vulputate. Aenean et erat a risus elementum mollis eu a neque. Integer congue orci tellus, sed mattis neque sollicitudin quis. Ut nec massa massa. Morbi eget aliquam urna. Etiam vitae eros id enim ultrices hendrerit. Quisque at arcu eros. Pellentesque at erat et sem imperdiet pharetra.
</p>
<p>
Suspendisse potenti. Phasellus vel leo nec ante feugiat suscipit sit amet quis nibh. Morbi at tempus nisi. Morbi posuere non sem sed mollis. Vestibulum a tellus nisl. Nunc mi augue, pharetra in congue sed, hendrerit eget neque. Proin rutrum, arcu non venenatis fermentum, justo nisl ultricies elit, ac congue ipsum dolor lobortis dui. Duis interdum sit amet enim vitae vestibulum. Duis tincidunt urna at lorem tristique molestie. Fusce mollis, diam ut rhoncus iaculis, tortor augue accumsan nisl, nec pharetra massa ligula ut erat. Praesent tincidunt leo quis pellentesque pellentesque. Praesent pellentesque magna in felis feugiat auctor euismod ac tortor.
</p>
<p>
Etiam interdum egestas consectetur. Fusce tincidunt, sapien finibus consequat eleifend, mauris libero varius nunc, eget suscipit ligula augue id est. Sed porta nisi vitae massa commodo ornare. Aliquam erat volutpat. Vestibulum dapibus leo dolor, nec porttitor eros viverra non. Vestibulum consequat nisl sed interdum dictum. Praesent ut nisi sed nibh feugiat consectetur a et risus. Integer euismod arcu sapien, vel molestie erat convallis vel. Suspendisse potenti.
</p>
</div>

</body>
</html>

关于javascript - 向上滚动时隐藏和显示导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44705096/

25 4 0
文章推荐： javascript - React-native 从一个通用处理程序类调用 API
文章推荐： javascript - 在 Electron 应用程序中的 iframe 中加载来自外部站点的本地镜像
文章推荐： javascript - 为什么模块无法正常工作？
文章推荐： javascript - 在函数中返回对象进行提升的成本