垂直固定的導航欄
[英]Vertically fixed navigation bar
問題描述
我想為我的網站垂直創建一個固定的導航欄。 目前，我使用這里各種帖子中提到的內容：
HTML：
<html>
<head>
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="{% static 'navbar.css' %}">
<script type="application/javascript">
$(document).ready(function () {
var navPos = $('.nav_menu').offset().top; //Sticky navbar
$(window).scroll(function () {
var scrollPos = $(this).scrollTop();
if (scrollPos >= navPos) {
$('.nav_menu').addClass('fixed');
} else {
$('.nav_menu').removeClass('fixed');
}
});
});
</script>
.....
<div class="nav-container">
<div class="nav_menu">
Bars go here
....
和CSS：
.nav-container .nav_menu.fixed {position: fixed; z-index: 10000; top: 0; width: 195px; padding-left: 8px}
此解決方案效果很好，導航欄已粘貼，在我的情況下，導航欄位於頁面的左上方。 如果我向下滾動，則完全跟隨滾動。 萬一我用一個小窗戶打開縫隙，然后我往下拉起，右邊的杠就會跟着走（這應該發生）。 但是，我希望該條僅垂直跟隨，以防有人向左或向右滾動，該條應保持在原位。
我怎樣才能做到這一點？
1 個解決方案
解決方案1
1 已采納 2018-02-22 15:28:56
您可以通過應用負向左滾動來停止水平固定：
var $window = $(window); var navPos = $('.nav_menu').offset().top; //Sticky navbar $window.scroll(function() { var scrollPos = $window.scrollTop(); var left = 0 - $window.scrollLeft(); if (scrollPos >= navPos) { $('.nav_menu').addClass('fixed').css('left', left + 'px'); } else { $('.nav_menu').removeClass('fixed').css('left', 0); } });
body, html { height: 1000px; width: 2000px; position: relative; margin: 0; padding: 0; } .nav_menu { height: 50px; background-color: blue; width: 195px; } .fixed { position: fixed; top: 0; left: 0; z-index: 2; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <br><br><br> <div class="nav_menu"></div>
固定滾動條上的導航欄
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.