居中导航栏 css 与 position:fixed
Center Navbar css with position:fixed
我有一个带有 position:fixed 的导航栏,但是当我向下滚动页面时它没有居中。宽度是90%,高度是自动的。我包括了我现在拥有的东西,但它不起作用。有什么想法吗?
.sticky {
position: fixed;
width: 90%;
height:auto;
top: 0;
right:0;
left:0;
margin: 0 auto;
}
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
这里是用来创建导航栏的HTML
<nav class="navbar navbar-inverse" style="background-color:#3A9DFA; width:80%">
<div class="container-fluid" id="navbar">
<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="index.html" style="color:#ffffcc">Music Moves</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" style="background-color:#3A9DFA; color:#ffffcc">Months<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="october20.html">October 2020</a></li>
<li><a href="november20.html">November 2020</a></li>
<li><a href="december20.html">December 2020</a></li>
</ul>
</li>
<li><a href="#top" style="color:#ffffcc">Top</a></li>
<li class="dropdown active">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" style="background-color:#3A9DFA; color:#ffffcc">Song's from October<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#chandelier">Chandelier</a></li>
<li><a href="#talkhouse">Talkhouse</a></li>
<li><a href="#savagemode2">Savage Mode 2</a></li>
</ul>
</ul>
<form class="navbar-form navbar-right" action="/action_page.php">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</nav>
从 CSS
中的 #navbar
中删除 left: 0;
和 margin: 0;
我有一个带有 position:fixed 的导航栏,但是当我向下滚动页面时它没有居中。宽度是90%,高度是自动的。我包括了我现在拥有的东西,但它不起作用。有什么想法吗?
.sticky {
position: fixed;
width: 90%;
height:auto;
top: 0;
right:0;
left:0;
margin: 0 auto;
}
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
这里是用来创建导航栏的HTML
<nav class="navbar navbar-inverse" style="background-color:#3A9DFA; width:80%">
<div class="container-fluid" id="navbar">
<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="index.html" style="color:#ffffcc">Music Moves</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" style="background-color:#3A9DFA; color:#ffffcc">Months<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="october20.html">October 2020</a></li>
<li><a href="november20.html">November 2020</a></li>
<li><a href="december20.html">December 2020</a></li>
</ul>
</li>
<li><a href="#top" style="color:#ffffcc">Top</a></li>
<li class="dropdown active">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" style="background-color:#3A9DFA; color:#ffffcc">Song's from October<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#chandelier">Chandelier</a></li>
<li><a href="#talkhouse">Talkhouse</a></li>
<li><a href="#savagemode2">Savage Mode 2</a></li>
</ul>
</ul>
<form class="navbar-form navbar-right" action="/action_page.php">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</nav>
从 CSS
中的#navbar
中删除 left: 0;
和 margin: 0;