Question

我有一个div #navlogo，其中包含一个徽标，当我的导航栏是静态的时会被隐藏，当它被修复时可见。当显示/隐藏div时，它会将其旁边的内容推送过来。

我正在尝试研究如何使用平滑动画制作此内容幻灯片，而不仅仅是被推送。

是否也可以让包含徽标的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您可以看到菜单内容的推送方式。

如果有人能帮助我，我们将不胜感激。

Answer 1

不确定动画中究竟需要什么，但使用参数slow添加show和hide可以帮助您获得如下动画

小提琴：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>

希望这对你有所帮助！

用滑动动画推动div

1 个答案: