スクロール後のJavaScriptの固定位置を一定距離外す

Question

ページ上部に固定する位置を設定しました。これは、ドキュメントやページの中央にスクロールしながら、これを私の後にします。ドキュメントの途中でドキュメントの途中でこれを貼り付け、それを使わずにスカルダウンしたいと思います。私が再び上にスクロールした後、私はそれを私に追いつけたい（固定位置）。ここで

は、私が働いているコードのスニペットです。

  if ($('body').hasClass('catalog-product-view')) { 

       if ($(this).scrollTop() >= $('.product-collateral-wrapper').innerHeight()/2) 
       { 
        my div should remain in its place now. waiting for me to scoll up again to follow me 
       }else{ 
have my div fixed positioned so when I scroll the page, I always see it. 
} 

Here is the full function 
     $(window).scroll(function() { 
      if ($(this).scrollTop() > offset && !stickyActive) { 
       stickyActive = true; 
       $header.addClass("sticky-active"); 
       $(stickyPlaceholder).show(); 
       var logo = $('<li></li>').append($('.main-header .logo-container > a').clone()).html(); 
       logo = '<li class="logo-fixed">'+logo+'</li>'; 
       $('.main-header nav.top-bar.main-nav .top-bar-section .left').prepend(logo); 
       if ($('.top-bar-section .main-logo-sticky').length) { 
        $('.top-bar-section .main-logo').hide(); 
       } 
       topbarLeftHeight = $('.main-header nav.top-bar.main-nav .top-bar-section .left').outerHeight(); 
      } else if ($(this).scrollTop() < offset && stickyActive) { 
       $header.removeClass("sticky-active"); 
       $('nav.top-bar.main-nav .logo-fixed').remove(); 
       $(stickyPlaceholder).hide(); 
       stickyActive = false; 
      } 
      if ($('body').hasClass('catalog-product-view') && Modernizr.mq('only screen and (min-width: 64.063em)')) { 
       setTimeout(function(){ 
        $('.magellan-nav.magellan-fixed').css('margin-top',topbarLeftHeight+'px'); 
       },100); 
      } 



//HERE GOES CHANGES I AM DOING. It started to make sense how to get it working, but will this be effecient or will it have performance drawback cause of scroll event is triggered with every scroll, and same calculations will be redone again and again? 

      if ($('body').hasClass('catalog-product-view')) { 



       if ($(this).scrollTop() >= $('.product-collateral-wrapper').innerHeight()/2) 
        { 
//will enter code here`l toggle position and top property here based on some calculations 
        }else{ 
    //will toggle position and top property here based on some calculations 
    } 
       } 





      }); 
      $(window).scroll(); 
     }; 

私は、固定から相対への位置変更を試みました。これはページの先頭に戻り、ビューポート内では見えなくなります。

Answer 1

要素がポイントに追いついているように見えます。ほとんどの場合、ページ内の目に見えない壁に当たったようです。この場合、ブレークポイント（ページの上部からピクセル単位）を決定し、その位置を計算したtop値のabsoluteに設定することをお勧めします。ポジショニングロジックonScrollとonResizeを切り替えて、コールバックをしている間にコールバックを絞り込むこともできます。

Answer 2

あなたは正しい軌道に乗っていますが、コードがなくても固い答えは得られません。

私が一番好きなのは、最初にページの中央にあるdivと書かれたページを、途中までスクロールした後にどのように表示させたいのですか。あなたは二つのバージョンに満足したら

.div-class { 
    // standard css here 
} 
.div-class.fixed { 
    position: fixed; 
} 

が、その後、切り替えるには、あなたのjqueryのスクリプト上で動作します：あなたはそれを持っていたら、それはページの最上部に固定されるように、追加のクラスを使用して、セカンダリCSSの設定を作成しますウィンドウの位置に基づいて追加のクラスのオン/オフ：簡単に十分に検索し、良い解決策を見つけることができます。 Lincolnが言及したように、スクロールイベントが発生するたびにスクリプトが実行されないようにスクリプトを絞りたい場合があります。

Answer 3

あなたは、これはあなたが設定できる画像で作業したい場合はbackground-image、background-size、background-repeat、およびdiv内background-attachmentプロパティ（あなたは、画像のサイズを変更する場合）。背景画像

は、あなたのイメージがあなたのフォルダの中に配置されているURLまたは場所にbackground-imageを設定します。

背景リピート
はbackground-imageがあなたのdiv

背景 - 添付ファイル
全体で繰り返すことはしませんのでno-repeatにbackground-repeatを設定fixedにbackground-attachmentを設定します。 divが最後までスクロールされるまで、その位置にとどまります。

あなたは画像が設定したページの真ん中にヒットしたら、あなたのdivのheight50%に消えて、設定したいので、あなたのhtmlとbody高さに100%

例：

html, body { 
 
    height: 3000px; 
 
} 
 

 
#coolCat { 
 
    background-image: url("https://newevolutiondesigns.com/images/freebies/cool-wallpaper-1.jpg"); 
 
    background-size: 100% 250px; 
 
    background-repeat: no-repeat; 
 
    width: 100%; 
 
    height: 50%; 
 
    background-attachment: fixed; 
 
}

<div id='coolCat'></div>