垂直固定导航条
垂直固定导航条
提问于 2018-02-22 22:53:11
我想为我的网站创建一个垂直的固定导航栏。目前我使用的是在这里的不同帖子中提到的那个：
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
Stack Overflow用户
回答已采纳
发布于 2018-02-22 23: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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48930428
复制相关文章
相似问题
腾讯云开发者
