我的导航栏粘贴到页面的右边缘，当它在滚动时粘到顶部
[英]My navbar sticks to the right edge of the page, when it stick to top on scroll
问题描述
我已将导航栏设置为向下滚动到顶部。 但由于某种原因，div边缘粘在页面的边缘。
我搜索了很多，但找不到任何东西，我只是需要它一直居中...
(function($) { "use strict"; var $navbar = $("#navbar"), y_pos = $navbar.offset().top, height = $navbar.height(); $(document).scroll(function() { var scrollTop = $(this).scrollTop(); if (scrollTop > y_pos + height) { $navbar.addClass("navbar-fixed").animate({ top: 0 }); } else if (scrollTop <= y_pos) { $navbar.removeClass("navbar-fixed").clearQueue().animate({ top: "-48px" }, 0); } }); })
/* nav stick to top*/ .navbar-fixed { top: 0; position: -webkit-fixed; /* Safari & IE */ position: fixed; width: 100%; vertical-align: middle; } /*---------------------- $NAVBAR basic navbar styling ----------------------*/ nav { overflow: hidden; display: block; width: 100%; color: #bbb; background-color: rgba(46, 46, 46, .6); font-weight: bold; letter-spacing: 0.025em; border-radius: 5px; } nav ul { text-align: center; margin: 0; } nav ul li { display: inline-block; padding: 0 3em; line-height: 3em; transition: .1s ease; color: rgba(0,255,255,0.5); text-shadow: rgba(255, 0, 0, .8) -2.5px 0px 0px; -webkit-filter: blur(.2px); } nav ul li:hover { background: #156499; color: rgb(255, 255, 255); text-shadow: none; -webkit-filter: blur(0px); }
</head> <header> <nav id="navbar"> <ul> <a class="nav-btn" id="gotoGenRules_btn" href="#general-rules"><li>General Rules</li></a> <a class="nav-btn" id="gotoNLR_btn" href="#nlr"><li>NLR</li></a> <a class="nav-btn" id="gotoPropRules_btn" href="#prop-rules"><li>Prop Rules</li></a> <a class="nav-btn" id="gotoMisc_btn" href="#misc-rules"><li>Misc Rules</li></a> <a class="nav-btn" id="gotoPoliceRules_btn" href="#police-rules"><li>Police Rules</li></a> <a class="nav-btn" id="gotoRaidingRules_btn" href="#raiding-rules"><li>Raiding Rules</li></a> </ul> </nav> </header> <body>
我希望它一直处于屏幕中间，但它只是在边缘徘徊......
1 个解决方案
解决方案1
0 已采纳 2019-03-29 23:11:27
只需添加left: 0; 在.navbar-fixed css中将解决您的问题。 谢谢
.navbar-fixed {
top: 0;
position: -webkit-fixed; /* Safari & IE */
position: fixed;
width: 100%;
vertical-align: middle;
left: 0;
}
如何缩小页面中间的导航栏并使其在滚动时粘在页面顶部？
[英]How can I shrink a navbar that is in the middle of the page and make it stick to the top of the page on scroll?
滚动到另一个div时，将NavBar放在顶部（即top：100vh）
[英]Stick NavBar on top when scroll over another div (ie. top:100vh)
我想将导航栏固定在顶部，但是当我滚动导航栏时，它却位于内容的后面
[英]I want to make a navbar stick to the top but when I scroll the bar comes down but behind the content
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.