0

この問題については親切に助けていただきましたが、さらに問題が発生しています。

ユーザーがスクロールしたときにヘッダーの高さを変更し、スムーズに移行したいと考えています。

現在は機能しているようですが、ナビを使用しているにもかかわらず、ナビで高さを調整するとコンテンツが切り取られoverflow:visibleます。

第二に、スクロールするとすぐにアニメーションが表示されるように見えますが、100px を超えてスクロールするとアニメーションが開始されます。

JSフィドル

$(function(){
$(document).scroll( function() {
    var value = $(this).scrollTop();

    if ( value > 100 ){
        $("nav").animate({height:100},"slow");

    }
    else{
       $("nav").animate({height:45},"slow");
    }
});
});

また、画像を現在のサイズの 80% に縮小し、スムーズに移行したいと考えています。

4

2 に答える 2

2

あなたの問題は次のとおりです。スクロールバーを使用するたびに、関数がトリガーされるたびに。そう..

たとえば、scrollTop が 80 で 120 にすると、関数は 40 回トリガーされるため、animate 関数を 40 回呼び出します。実際にあなたがしていることは機能していますが、この問題のために非常にゆっくりとしています。

解決策: ブール値を使用して、nav タグのステータスを確認する必要があります。

値 > 100 で navIsBig の場合は 45 にアニメーション化します。それ以外の場合、値 <= 100 で !navIsBig の場合は 100 にアニメーション化します。

2 番目のヒント: $('nav') を実行するたびに、jQuery は DOM で nav を検索します。一度実行して保存してください。

私のjsFiddle: http://jsfiddle.net/thXDt/8/

$(function(){
  var navIsBig = true;
  var $nav = $('nav');

 $(document).scroll( function() {
   var value = $(this).scrollTop();

   if ( value > 100 && navIsBig ){
      $nav.animate({height:45},"slow");
      navIsBig = false;

   } else if (value <= 100 && !navIsBig ) {
      $nav.animate({height:100},"slow");
      navIsBig = true;
  }
 });
});

オーバーフローについて: 見える; あなたにとって悪いニュースです.jQueryはそれを強制的にオーバーフローさせます: hidden; アニメーション中。別の方法でそれを行う必要があります。nav タグの外側でロゴを使用し、css で遊ぶようにします。

于 2013-10-28T23:25:39.457 に答える
1

Luc からの情報によると、jQueryはアニメーションの要素に自動的に設定overflow: hiddenします。height/widthこれを防ぐにはoverflow: hidden、最新バージョンのjQueryをhttp://jquery.com/download/からダウンロードし、圧縮されていないバージョン( http://code.jquery.com/jquery-1.10.2.js )を選択します。行をコメントアウトします9123 //style.overflow = "hidden"。ファイルを Javascript ファイルとして保存し、これをヘッダーに外部スクリプト ファイルとして含めます。 jQuery 参照を必ず削除してください。

さらに、適切な数を 追加.stop()して変更することをお勧めします。"slow"

jQuery と変更を加えた JSFiddle は次のとおりです: >>>ここをクリック<<<

jQuery:

$(function(){
    var navIsBig = true;
    var $nav = $('nav');

$(document).scroll( function() {
   var value = $(this).scrollTop();

  if ( value > 100 && navIsBig ){
      $nav.stop().animate({
           height:45
      },1000);
      navIsBig = false;
  } else if (value <= 100 && !navIsBig ) {
      $nav.stop().animate({
          height:100,
      },1000);
      navIsBig = true;
  }
 });
 });
于 2013-10-29T01:05:03.020 に答える