我想要我的导航栏，它具有固定宽度并且居中，在页面滚动时从其中心向左和向右扩展。目前它刚刚跳到新的宽度。
我设置了一个演示，您可以看到我正在尝试做什么: http://codepen.io/anon/pen/Qyozvd
(最好看看 codepen 上的演示。)
$(document).ready(function() {
// run test on initial page load
checkSize();
// run test on resize of the window
$(window).resize(checkSize);
$(".navbar-toggle").on("click", function () {
$(this).toggleClass("navbar-toggle-fix");
});
});
var header, logo, yPos, windowWidth, headerCollapse, mbsp;
function yScroll() {
header = document.getElementById('header');
logo = document.getElementById('logo');
headerCollapse = document.getElementById('headerCollapse');
mbsp = document.getElementById('mbsp');
yPos = window.pageYOffset;
windowWidth = $(document).width();
if (yPos > 10) {
header.style.height = "69px";
$(headerCollapse).removeClass('container');
$('#logo').addClass('LogoCollapse');
$('.navbar').addClass('mb-navbarCollapse');
if (windowWidth > 768) {
//mbsp.style.height = "0px";
}
if (windowWidth < 768) {
}
} else {
header.style.height = "186px";
$(headerCollapse).addClass('container');
$('#logo').removeClass('LogoCollapse');
$('.navbar').removeClass('mb-navbarCollapse');
if (windowWidth > 768) {
//mbsp.style.height = "186px";
logo.style.width = "137px"
logo.style.height = "69px"
logo.style.backgroundSize = "137px auto"
}
if (windowWidth > 1024) {
logo.style.width = "160px"
logo.style.height = "119px"
logo.style.backgroundSize = "160px auto"
}
if (windowWidth < 768) {
}
}
}
window.addEventListener("scroll", yScroll);
//Function to the css rule
function checkSize(){
if ($(".mqJquery").css("float") == "none" ){
$(function() {
var $el, leftPos, newWidth;
var $mainNav = $(".nav-tabs");
var activeItem = $(".nav-tabs .active")[0] ? $($(".nav-tabs .active")[0]) : null;
var itemLinks = $(".nav-tabs li a");
$mainNav.append("<li id='magic-line'></li>");
var $magicLine = $("#magic-line");
if (activeItem) {
$magicLine
.width(activeItem.width())
.css("left", activeItem.position().left)
.data("orig-left", activeItem.position().left)
.data("orig-width", $magicLine.width());
} else {
$magicLine.width(0);
}
itemLinks.hover(function() {
$el = $(this);
leftPos = $el.parent().position().left;
newWidth = $el.parent().width();
if (activeItem == null && $magicLine.position().left === 0) {
$magicLine.css("left", leftPos + newWidth / 2);
}
$magicLine.stop().animate({
left: leftPos,
width: newWidth
});
}, function() {
$magicLine.stop().animate({
left: $magicLine.data("orig-left"),
width: $magicLine.data("orig-width")
});
});
});
}
}
// ADD SLIDEDOWN ANIMATION TO DROPDOWN //
$('.dropdown').on('show.bs.dropdown', function(e){
$(this).find('.dropdown-menu').first().stop(true, true).slideDown(500, "easeOutBounce");
});
// ADD SLIDEUP ANIMATION TO DROPDOWN //
$('.dropdown').on('hide.bs.dropdown', function(e){
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(500, "easeOutBounce");
});/* Basic styles */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic);
html {
position: relative;
min-height: 100%;
}
body {
background-color:#cfcfcf;
font-family: 'Roboto',Arial,Helvetica,sans-serif;
}
.mqJquery {
float:left;
}
.clearfix {
clear: both;
}
/* Headings */
h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}
/* Color Theme */
.mb-bg-red {
background-color:#fd100a;
}
.mb-font-red {
color:#fd100a;
}
.mb-bg-darkgrey {
background-color: #3e3e3e;
}
.mb-red-grid-pattern {
background-image: url('img/red-grid-pattern.png');
background-repeat:repeat;
}
.mb-darkgrey-grid-pattern {
background-image: url('img/darkgrey-grid-pattern.png');
background-repeat:repeat;
}
/* Header styles */
header {
background-image: url('img/header-pattern.png');
border-top:4px solid #fd100a;
width:100%;
height:100px;
transition: height 0.2s linear 0s, top 0.2s linear 0s;
-webkit-transition: height 0.2s linear 0s, top 0.2s linear 0s;
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}
/* Navbar responsive styles */
.navbar {
margin-bottom: 20px;
}
.nav {
margin-bottom: 15px;
}
.nav-tabs > li > a {
border-radius: 0;
color: #fff;
font-size: 9pt;
font-weight:500;
-webkit-transition: background-color 150ms linear;
-moz-transition: background-color 150ms linear;
-o-transition: background-color 150ms linear;
-ms-transition: background-color 150ms linear;
transition: background-color 150ms linear;
}
.navbar .open .dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover,
.nav .open > a, .nav .open > a:focus, .nav .open > a:hover,
.nav > li > a:focus, .nav > li > a:hover {
background-color: #a41d1d;
text-decoration: none;
}
.nav-tabs > li > a:hover {
border-color: #eee #eee #ddd;
}
.nav-tabs > li {
float:none;
}
.navbar-default,
.navbar-default .navbar-collapse, .navbar-default .navbar-form,
.nav-tabs {
border-color: transparent;
}
.nav .open > a, .nav .open > a:focus, .nav .open > a:hover,
.navbar-default .navbar-toggle {
border-color: #a41d1d;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #a41d1d;
}
.navbar .open .dropdown-menu {
background-color: transparent;
border: 0 none;
box-shadow: none;
float: none;
margin-top: 0;
position: static;
width: auto;
}
.navbar .open .dropdown-menu > li > a {
color:#fff;
}
.navbar .open .dropdown-menu .dropdown-header {
color:#a41d1d;
}
.navbar .open .dropdown-menu .divider {
background-color:#a41d1d;
}
.nav > li {
display: block;
position: relative;
}
.nav > li > a {
display: block;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
background-color: transparent;
}
/* Animated navbar collapse icon */
.navbar-toggle-fix {
padding-left: 12px;
padding-right: 8px;
}
.navbar-toggle .icon-bar {
width: 22px;
transition: all 0.2s;
-webkit-transition: all 0.2s;
}
.navbar-default .navbar-toggle {
position:relative;
padding-top:10px;
z-index:100
}
.navbar-toggle .top-bar {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform-origin: 10% 10%;
-webkit-transform-origin: 10% 10%;
}
.navbar-toggle .middle-bar {
opacity: 0;
}
.navbar-toggle .bottom-bar {
transform: rotate(-45deg);
transform-origin: 10% 90%;
-webkit-transform: rotate(-45deg);
-webkit-transform-origin: 10% 90%;
}
.navbar-toggle.collapsed .top-bar {
transform: rotate(0);
-webkit-transform: rotate(0);
}
.navbar-toggle.collapsed .middle-bar {
opacity: 1;
}
.navbar-toggle.collapsed .bottom-bar {
transform: rotate(0);
-webkit-transform: rotate(0);
}
/* Content styles */
#content {
margin-top: 50px;
}
/* Footer styles */
footer {
position: relative;
bottom: 0;
width: 100%;
height: 448px;
background-color: #515151;
}
/* Layout styles */
#logo {
background-image:url('img/logo.png');
height: 67px;
width: 90px;
background-size: 67px auto;
transition:all 0.4s;
-webkit-transition:all 0.4s;
-o-transition:all 0.4s;
-moz-transition:all 0.4s;
margin-top:7px;
margin-bottom: 11px;
}
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
.mqJquery {
float:none;
}
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
/* Navbar styles */
.navbar {
height:64px;
padding-left: 30px;
padding-right:-30px;
position: absolute;
top: 150px;
-webkit-transition: top 0.3s ease-in-out, width 0.3s ease-in-out;
-moz-transition: top 0.3s ease-in-out, width 0.3s ease-in-out;
-o-transition: top 0.3s ease-in-out, width 0.3s ease-in-out;
-ms-transition: top 0.3s ease-in-out, width 0.3s ease-in-out;
transition: top 0.3s ease-in-out, width 0.3s ease-in-out;
}
.container {
-webkit-transition: width 0.5s ease-in-out;
-moz-transition: width 0.5s ease-in-out;
-o-transition: width 0.5s ease-in-out;
-ms-transition: width 0.5s ease-in-out;
transition: width 0.5s ease-in-out;
}
.mb-navbarCollapse {
width: 100%;
top:0px;
background-color: #515151;
background-image: url('img/darkgrey-grid-pattern.png');
-webkit-transition: width 0.5s ease-in-out, top 0.5s ease-in-out, background-color 0.5s ease-in-out, background-image 1s ease-in-out;
-moz-transition: width 0.5s ease-in-out, top 0.5s ease-in-out, background-color 0.5s ease-in-out, background-image 1s ease-in-out;
-o-transition: width 0.5s ease-in-out, top 0.5s ease-in-out, background-color 0.5s ease-in-out, background-image 1s ease-in-out;
-ms-transition: width 0.5s ease-in-out, top 0.5s ease-in-out, background-color 0.5s ease-in-out, background-image 1s ease-in-out;
transition: width 0.5s ease-in-out, top 0.5s ease-in-out, background-color 0.5s ease-in-out, background-image 1s ease-in-out;
}
.mb-navbarCollapse .nav .open > a,
.mb-navbarCollapse .nav .open > a:focus,
.mb-navbarCollapse .nav .open > a:hover,
.mb-navbarCollapse .nav-tabs > li > a:hover,
.mb-navbarCollapse .nav > li > a:focus,
.mb-navbarCollapse .nav > li > a:hover,
.mb-navbarCollapse .nav-tabs > li.active > a,
.mb-navbarCollapse .nav-tabs > li.active > a:focus,
.mb-navbarCollapse .nav-tabs > li.active > a:hover {
color: #f9131b !important;
}
.nav {
margin-bottom: 0;
}
#magic-line {
background: #3e3e3e none repeat scroll 0 0;
top: 0px;
height: 0.2em;
left: 0;
position: absolute;
width: 100px;
}
.nav-tabs {
border-bottom: 0 none;
}
.nav-tabs:hover {
border-bottom: 1 none;
}
.nav .open > a, .nav .open > a:focus, .nav .open > a:hover,
.nav-tabs > li > a:hover,
.nav > li > a:focus, .nav > li > a:hover,
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
border: 0;
border-color: transparent;
background-color: transparent;
color: #3e3e3e;
cursor:pointer;
padding: 23px 16px;
-webkit-transition: color 150ms linear;
-moz-transition: color 150ms linear;
-o-transition: color 150ms linear;
-ms-transition: color 150ms linear;
transition: color 150ms linear;
}
.nav > li > a {
padding: 22px 15px;
}
.nav-tabs > li {
float:left;
}
.navbar .open .dropdown-menu {
background-clip: padding-box;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
display: none;
float: left;
font-size: 14px;
left: 0;
list-style: outside none none;
margin: 0;
min-width: 160px;
padding: 5px 0;
position: absolute;
text-align: left;
top: 100%;
z-index: 1000;
}
.navbar .open .dropdown-menu > li > a {
color: #3E3E3E;
}
.navbar .open .dropdown-menu > li > a:hover {
color: #fff;
}
/* Header style*/
header {
position: fixed;
z-index: 1;
height: 186px;
}
#headerCollapse {
position: relative;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
/* Content styles */
#content {
margin-top:20px;
}
/* Layout styles */
#logo {
height: 119px;
width: 160px;
background-size: 160px auto;
margin-top:17px;
margin-bottom: 21px;
}
.LogoCollapse {
background-size: 64px auto !important;
height: 48px !important;
left: 25% !important;
margin-top: 7px !important;
position: absolute !important;
width: 64px !important;
z-index: 9999 !important;
}
}<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="https://getbootstrap.com/favicon.ico">
<title>Muth Bau</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://mirsoftware.de/muthbau/css/jquery-ui.min.css" rel="stylesheet"/>
</head>
<body>
<div class="mqJquery"></div>
<div class="clearfix"></div>
<header id="header">
<div id="headerCollapse" class="container">
<a href="#"><div id="logo"></div></a>
<!-- Static navbar -->
<nav class="navbar navbar-default navbar-static-top mb-bg-red mb-red-grid-pattern">
<div class="container">
<div class="navbar-header">
<button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
</div>
<div aria-expanded="false" id="navbar" class="navbar-collapse collapse">
<ul class="nav nav-tabs">
<li class="active"><a href="#">HOME</a></li>
<li><a href="#">ÜBER UNS</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">SERVICE <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li><a href="#">KONTAKT</a></li>
<li><a href="#">IMPRESSUM</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
</div>
</header>
<div id="mbsp" style="height:186px;"></div>
<section id="content" class="container-fluid">
<div class="jumbotron">
<h1>blabla beispiel text</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
</div>
<div class="jumbotron">
<h1>blabla beispiel text</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
</div>
<div class="jumbotron">
<h1>blabla beispiel text</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
</div>
<div class="jumbotron">
<h1>blabla beispiel text</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
</div>
</section> <!-- /content -->
<footer class="mb-darkgrey-grid-pattern">
<div class="container">
<p>Place sticky footer content here.</p>
</div>
</footer>
<script src="http://mirsoftware.de/muthbau/js/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>最佳答案
您无缘无故地同时对许多元素进行了许多更改。只使用一个容器来完成所有动画，比方说 #headerCollapse，使用转换并通过添加 .container 类更改它的属性。
#headerCollapse {
transition: width 0.5s ease-in-out;
position:relative;
}
#headerCollapse:not(.container){
width:100%;
height: 69px;
}
#headerCollapse.container{
height: 186px;
}
这样，你就有了 #headerCollapse 从全宽和 69px 高度到 .container 宽度和 186px 高度的动画，只需添加 .container 给它上课。
接下来您要做的是将 .navbar 放置在始终固定在 #headerCollapse 底部并扩展到其宽度的位置。
.navbar {
position:absolute;
left:0;
right:0;
bottom:0;
}
关于jquery - 使用CSS过渡从中心向左和向右扩展宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35431422/