向上滚动时隐藏并显示导航栏

时间：2017-06-22 16:40:25

标签： javascript

我想改进现有代码，允许我在加载页面后显示导航栏，在用户向下滚动后消失。我希望每次用户向上滚动时都会显示导航栏。基本上，我需要一个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>

2 个答案:

答案 0 :(得分：0)

如果允许创建HTML，可以通过Javascript添加Headroom所需的CSS样式。

注意：这只会创建净空的CSS;头顶空间本身仍然必须加载

在headroom.js examples

上使用CSS的示例

Pure JS：

var styleNode = document.createElement("style");
var cssNode = document.createTextNode('.headroom {\
    will-change: transform;\
    transition: transform 200ms linear;\
}\
.headroom--pinned {\
    transform: translateY(0%);\
}\
.headroom--unpinned {\
    transform: translateY(-100%);\
}');
styleNode.appendChild(cssNode);
document.head.appendChild(styleNode);

jQuery的：

$('<style/>', {
  text: '.headroom {\
will-change: transform;\
transition: transform 200ms linear;\
}\
.headroom--pinned {\
transform: translateY(0%);\
}\
.headroom--unpinned {\
transform: translateY(-100%);\
}'
}).appendTo('head');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

答案 1 :(得分：0)

使用headroom.js（正常方式）（不是纯JS，但应该适用于OP）：

重要说明：

  • 标题必须固定在顶部（Bootstrap navbar类 .navbar-fixed-top）
  • 头顶空间做任何事情所需的CSS样式 （它只是添加/删除类）
  • 如果使用jQuery插件，必须先加载插件（jQuery.headroom.js）

＆＃13;
＆＃13; 
var headroom = new Headroom(document.getElementById("navbar"));
headroom.init();
＆＃13; 
.headroom {
    will-change: transform;
    transition: transform 200ms linear;
    
}
.headroom--pinned {
    transform: translateY(0%);
}
.headroom--unpinned {
    transform: translateY(-100%);
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题