我有一个 div #navlogo，其中包含一个 Logo ，当我的导航栏静态时该 Logo 隐藏，而当导航栏固定时该 Logo 可见。当 div 显示/隐藏时，它会将旁边的内容推倒。
我正在尝试弄清楚如何使该内容以流畅的动画滑动，而不是仅仅被插入。
是否也可以让包含 Logo 的 div 也滑入？
这是我正在使用的脚本
$(window).scroll(function() {
var nav = $('#custom-bootstrap-menu');
var body = $('body');
var top = 100;
var logo = $('div#navlogo');
if ($(window).scrollTop() >= top) {
nav.addClass('navbar-fixed-top');
body.addClass('padding-fifty');
logo.css('display', 'block');
} else {
nav.removeClass('navbar-fixed-top');
body.removeClass('padding-fifty');
logo.css('display', 'none');
}
});
Here is the JSFIDDLE im working with您可以看到菜单内容是如何推送的。
如果有人能帮助我，我将不胜感激。
最佳答案
不确定您到底想要什么动画，但是使用参数 slow 添加显示和隐藏可以帮助您获得如下所示的动画
在这里摆弄:https://jsfiddle.net/rxysoxu9/
$(window).scroll(function() {
var nav = $('#custom-bootstrap-menu');
var body = $('body');
var top = 100;
var logo = $('div#navlogo');
if ($(window).scrollTop() >= top) {
nav.addClass('navbar-fixed-top');
body.addClass('padding-fifty');
logo.show('slow');
//logo.css('display', 'block');
} else {
nav.removeClass('navbar-fixed-top');
body.removeClass('padding-fifty');
logo.hide('slow');
//logo.css('display', 'none');
}
});#logo {
height: 100px;
}
.padding-fifty {
padding-top: 50px;
}
#navlogo {
display: none;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<body>
<div id="logo">
<div class="container">
<div class="row">
<div class="col-md-6">
<h1>CHEEZ-IT</h1>
</div>
<div class="col-md-6">
<!-- something -->
</div>
</div>
</div>
</div>
<!-- Static navbar -->
<nav id="custom-bootstrap-menu" class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="navlogo">
<a class="navbar-brand" href="#">CHEEZ-IT!</a>
</div>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About Us <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Who are Cheez-it's</a></li>
<li><a href="#">Credentials</a></li>
</ul>
</li>
<li><a href="#contact">Our Services</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Industries <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Cheeze-it Solar</a></li>
<li><a href="#">Cheeze-it Infrastructure</a></li>
<li><a href="#">Cheeze-it Harvest</a></li>
</ul>
</li>
<li><a href="#contact">Partners</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>CONTENT IS GRAND</h2>
<h2>CONTENT IS GRAND</h2>
<h2>CONTENT IS GRAND</h2>
<h2>CONTENT IS GRAND</h2>
<h2>CONTENT IS GRAND</h2>
<h2>CONTENT IS GRAND</h2>
<h2>CONTENT IS GRAND</h2>
<h2>CONTENT IS GRAND</h2>
<h2>CONTENT IS GRAND</h2>
<h2>CONTENT IS GRAND</h2>
<h2>CONTENT IS GRAND</h2>
<h2>CONTENT IS GRAND</h2>
<h2>CONTENT IS GRAND</h2>
<h2>CONTENT IS GRAND</h2>
<h2>CONTENT IS GRAND, MAN</h2>
</div>
</div>
</div>
</body>希望这对您有帮助!
关于javascript - 用滑动动画插入div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33074362/