通过滑动动画将div推入

Question

I have a div #navlogo containing a logo which is hidden when my navbar is static and visible when it is fixed. 我有一个div #navlogo，其中包含一个徽标，当我的导航栏是静态的时，该徽标会隐藏，而在固定时会显示。 When the div is shown/hidden it pushes the content next to it over. 显示/隐藏div时，会将其旁边的内容压入。

I am trying to work out how to make this content slide across with a smooth animation, rather than just being pushed. 我正在尝试找出如何使该内容以平滑的动画滑动，而不只是被推动。

Is it also possible to have the div containing the logo to slide in too? 是否也可以使包含徽标的div也滑入？

Here's the script I'm using 这是我正在使用的脚本

$(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 You can see how the menu content is pushed across. 这是与JSFIDDLE一起使用的即时消息，您可以了解如何推送菜单内容。

If anyone can help me out it would be greatly appreciated. 如果有人可以帮助我，将不胜感激。

Answer 1

Not sure what exactly you want in animation, but adding show and hide with parameter slow can help you get some animation like below 不确定要在动画中到底要什么，但是以slow参数添加显示和隐藏可以帮助您获得如下所示的动画

Fiddle Here: https://jsfiddle.net/rxysoxu9/ 在这里提琴： 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>

Hope this helps to you! 希望这对您有所帮助！

通过滑动动画将div推入

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-10-12 06:23:05

通过滑动动画将div推入

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-10-12 06:23:05

解决方案1
0 已采纳 2015-10-12 06:23:05