1

ユーザーが 500px を超えてスクロールすると表示され、ユーザーがページを上にスクロールすると消える固定ナビゲーション メニューを作成しようとしています。

ただし、単に現れたり消えたりするのではなく、スライドする動きでアニメーション化したいと考えています。

Stackoverflow でこの質問に対する回答の一部を見つけました (リンク)。JSFiddle ソリューション: http://jsfiddle.net/k3AHM/1/

var nav = $('.nav');
var scrolled = false;

$(window).scroll(function () {

if (500 < $(window).scrollTop() && !scrolled) {
    nav.addClass('visible').animate({ top: '0px' });
    scrolled = true;
}

if (500 > $(window).scrollTop() && scrolled) {
    nav.removeClass('visible').css('top', '-30px');
    scrolled = false;      
}

上記のコードは、ユーザーが 500px を超えたときに固定ナビゲーション メニューがアニメーション表示される範囲で機能します。ただし、ユーザーがすぐに消えるのではなく、画面を上にスクロールすると、メニューが再びアニメーション化される必要があります。

メニューがインとアウトの両方でアニメーション化できるようにする JavaScript の変更を誰かが提案できれば、とても感謝しています。

ありがとうございました！

4

3 に答える 3

2

次のようなことができます。

http://jsfiddle.net/k3AHM/4/

 if (500 > $(window).scrollTop() && scrolled) {
   //animates it out of view
   nav.animate({ top: '-30px' });  
   //sets it back to the top
    setTimeout(function(){
       nav.removeClass('visible');
    },500);
    scrolled = false;      
}
于 2013-10-24T09:35:51.930 に答える
2

Animate にはさまざまなオーバーロードがあり、遅延を使用して左または右からスライドする方法でアニメーション化するのに役立ちます。

http://www.w3schools.com/jquery/jquery_animate.aspを参照してください。

あなたの場合、可視クラスを削除しながらアニメーション化して、すぐに消えないようにします。

var nav = $('.nav');
var scrolled = false;

$(window).scroll(function () {

 if (500 < $(window).scrollTop() && !scrolled) {
    nav.addClass('visible').animate({ top: '0px' });
    scrolled = true;
 }

 if (500 > $(window).scrollTop() && scrolled) {
    nav.animate({ top: '-30px'}, 500);
    scrolled = false;      
 }
});

上の図では、ゆっくりと非表示にするために遅延に 500 を指定しています。遅延要件に基づいて任意の値を使用してください。

于 2013-10-24T09:05:50.457 に答える
0

javascript やそのライブラリを使用する必要はありません。データ属性のブートストラップ ビルドといくつかの css を使用してこれを実現できます。

笑。モバイル幅で実行すると、奇妙に見えます。

<html>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style>
	.affix {
		width: 100%;
		top: -57px;   /*Will be hidden in top since -57px. Remember same px*/
		margin-top: 57px;  /*Will take 0.2 seconds make a top marigin*/
	  }
	.navbar {
		-moz-transition: margin .2s linear;
		-o-transition: margin .2s linear;
		-webkit-transition: margin .2s linear;
		transition: margin .2s linear;
	}
</style>

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Basic Topnav</a></li>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
  </ul>
</nav>

<div style="min-height: 2500px">test</div>
  
</html>

于 2016-12-08T18:56:51.877 に答える