5

スクロールイベントについて真剣に質問があります。一晩中解決しようとしましたが、できませんでした。

上部にナビゲーションを貼り付けようとしています。スティックエフェクトは$(window).scrollTop()、ナビゲーション直前のポイントを通過すると処理されます。

問題は、IE と Chrome では「まばたき」効果 (遅延プロセスのようなもの) が発生するが、Firefox では発生しないことです。

調べているうちに、Firefox にはデフォルトで「スムーズ スクロール」があることがわかりました。

ただし、Chrome または IE でこの例を確認してください。

http://www.backslash.gr/demos/jquery-sticky-navigation/

Firefoxのようにとてもスムーズで、コードはとてもシンプルです......

要点は、この例とまったく同じことを行っているのに、なぜ「まばたき」効果があるのですか??

トリックはCSSですか??

js で firefox のようにスムーズなスクロールを作成する方法はありますか??

ご助力ありがとうございます。

$(window).on('scroll', Sticky);

function Sticky(){
    $(this).scrollTop() > anchor.offset().top
    ? nav.css({ 'position': 'fixed', 
                      'z-index': z_index, 
                       top: y, 
                       left: x, })
    : nav.css({ 'position': 'static', });
};
4

2 に答える 2

1

ここで 2 つのことを混同している可能性があると思います。

  1. リンクした作業コードを見てください。マウス スクローラーを使用して chrome、IE、firefox をスクロールすると、そこにまばたきがあります。
  2. まばたきは、あなたが急に体勢を変えているからです。値を突然変更するのではなく、位置をアニメーション化するように js を変更してみてください。

他の人が言ったように、動作するコードにリンクし、トリックを示すことで答えを期待することは、私たち全員にとって役に立たないかもしれません. js の位置変更行にアニメーションを追加してみて、それが役立つかどうかを確認してください。

ここにはトリックはありません。すべてコードで書かれているので、ソースを読んで楽しんでください。

于 2013-02-02T16:03:43.400 に答える
1

不完全なサンプルコードを見ると、何が起こっているのかを判断するのが非常に難しいため、質問を完全なコードで更新するか、より良い方法である -例として役立つJSFiddleをアップロードしてください。必要な変更を加えて直接更新できます。これまでのところ(前に言ったことに基づいて)、サンプルコードのタイプミスがflickering原因で効果が得られているようです:

? nav.css({ 'position': 'fixed', 
                  'z-index': z_index, 
                   top: y, 
                   left: x, })
: nav.css({ 'position': 'static', });

適用する必要がある CSS プロパティと値の配列を終了していない (コンマで終了している,) 場合、一部の CSS プロパティを一重引用符で囲んでいない場合'コードは次のようになります

? nav.css({ 'position': 'fixed', 
                  'z-index': z_index, 
                   'top': y, 
                   'left': x })
: nav.css({ 'position': 'static' });

z_indexもちろん、すでに変数を設定していることが前提yですx

編集と免責事項:元のデモ コードを使用して新しいJSFiddleを作成しました。あなたが言及したデモは著作権で保護されているので、お役に立てれば、私ではなく元の作者に感謝の意を表してください. 私がJSFiddleに投稿したコードは、無料でダウンロードできます。ですから、デモ目的で再利用しても問題ないと思います。要件に準拠するようにそのコードを変更し、更新する各ステップで新しいバージョンに更新します。何か間違ったことをしている場所を追跡するのに役立ちます (もしあれば)。;)

于 2013-02-02T15:58:29.580 に答える