使用滑動動畫將div推開

我有一個div #navlogo，其中包含一個徽標，當我的導航欄是靜態的時候隱藏，當它固定時它是可見的。當div顯示/隱藏時，它會將內容推到旁邊。使用滑動動畫將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你可以看到菜單內容跨推腳本。

如果有人能幫助我，將不勝感激。

來源

2015-10-12 Jalapeno Jack

Something ** [like this]（https://jsfiddle.net/Guruprasad_Rao/gx25ospo/6/）**？ –

不知道你在動畫中想要什麼，但加入的顯示和隱藏與參數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> 
 
\t 
 
<div id="logo"> 
 
\t <div class="container"> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="col-md-6"> 
 
       <h1>CHEEZ-IT</h1> 
 
\t \t \t </div> 
 
\t \t \t <div class="col-md-6"> 
 
<!-- \t \t something --> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</div> \t 
 
\t 
 
\t 
 
\t 
 
\t 
 

 
    <!-- 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"> 
 
\t <div class="row"> 
 
\t \t <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> 
 
      
 
\t \t \t 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 

 

 

 
    </body>

希望這有助於給你！

來源

2015-10-12 06:23:05

當div顯示它像我想要的幻燈片，但當它消失時有一種方法，使其滑出？謝謝 –

這個https://jsfiddle.net/rxysoxu9/1/ –

怎麼樣謝謝！效果很好 –

使用滑動動畫將div推開

回答

相關問題