0

float: leftこれが私のセットアップです。左側の div には右側の div のテキストのアンカー リンクのリストが含まれている 2 つの div が並んでいます。左の div のタイトルをクリックすると、画面は右の div のそれぞれのコンテンツにジャンプします。

右側の div には大量のテキストが含まれており、メニューはかなり小さいので、メニューを常に画面に表示したいと考えています。

jqueryを使用してこれを機能させましたが、2つの問題があります。

  • とてもびくびくしています。スムーズにしたいです。
  • メニューに固定位置を与えると、右の div がメニューの後ろに移動します。

正しいdivを絶対にして値を与えることで2番目の問題を修正しようとしましたleftが、コンテンツに合わせて含まれるdivが拡大するのではなく、コンテンツが含まれるdivの下部から飛び出しました。

それがすべて理にかなっていることを願っています、ありがとう

JQuery

$(window).scroll( function() {
    if ($(window).scrollTop() > $('.servicesLeft').offset().top)
        $('.servicesLeft').addClass('floating');
    else
        $('.servicesLeft').removeClass('floating');
});

CSS

.floating {
    position: fixed;
    top: 0;
}

編集

JSFiddle リンク - http://jsfiddle.net/Rx93t/

4

2 に答える 2

0

フィドルを見る

  • リンクをクリックしたときにスムーズにスクロールできるように、jQuery scrollToプラグインを使用しました。
  • 次に、ウィンドウのスクロール イベントをチェックし、下にスクロールしたときにクラス nav-fixed を適用するコードがあります。

これがあなたが望んでいたものであることを願っています。

クリックでスクロール

   $('#list li a').on('click', function () {
      $.scrollTo($(this).attr('href'), 750);
   })

ウィンドウスクロールイベント

    $(window).scroll(function () {

      if (!$('.nav').attr('data-top')) {
        // If already fixed, then do nothing
        if ($('.nav').hasClass('nav-fixed')) {
            return;
        }
        var offset = $('.nav').position();
        $('.nav').attr('data-top', offset.top);
      }

      if ($('.nav').outerHeight() -$('.nav').attr('data-top')  <= $(this).scrollTop())   
      {
        $('.nav').addClass('nav-fixed');
      } 
      else 
      {
        $('.nav').removeClass('nav-fixed');
      }

    });
于 2013-04-03T15:58:03.850 に答える
0

要素の最初のトップ位置を変数に保存し、ウィンドウがそれを通過したかどうかをテストするだけです。そうしないと、ちらつきの原因となるたびに新しい位置に対してテストされます。

そう、

var y = $('.servicesLeft').offset().top;

$(window).scroll( function() {
if ($(window).scrollTop() > y)
    $('.servicesLeft').addClass('floating');
else
    $('.servicesLeft').removeClass('floating');
});

そして、使用する必要がある他のdivの前にあるdivの問題を修正するにはposition: relative、z-index

フィドル: http://jsfiddle.net/Rx93t/3/

于 2013-04-03T16:04:18.367 に答える