向上滾動時隱藏並顯示導航欄
[英]Hide and show the navbar when scrolling up
問題描述
我想改進現有的代碼，允許我在頁面加載后顯示導航欄，在用戶向下滾動后它會消失。 我希望每次用戶向上滾動時都會顯示導航欄。 基本上，我需要一個Headroom插件 ，但作為一個純粹的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 個解決方案
解決方案1
0 2017-06-22 16:54:09
如果允許創建HTML，可以通過Javascript添加Headroom所需的CSS樣式。
注意：這只會創建凈空的CSS; 仍然必須裝載凈空高度
在headroom.js示例中使用CSS的示例
純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>
解決方案2
0 已采納 2017-06-22 18:06:44
使用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>
當我向上滾動時，導航欄必須停留在最高位置，並且不要通過跟隨導航欄的圖像來隱藏
[英]when i am scrolling up, the navbar has to stick at top position and don't hide by following images of navbar
向下滾動時如何隱藏搜索欄以及使用react-native向上滾動時如何顯示搜索欄？
[英]How to hide a search bar when scrolling down and how to show it when scrolling up with react-native?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.