スクロール中にdivをどのように同期させるのですか？

Question

スクロール中にdiv同期を処理しようとしています。基本的には、ページスクロールとして制御したいdivは2つしかなく、一度上に達すると2番目のdivに固定されます。 添付のGIFアイコンを確認してください。

checkこれまでの進捗状況です。

私のコードの問題は、ページをスクロールするとすぐに両方のdivが一番上に届きます。私はそれを行うために使用される

jqueryのは、以下の通りです：

jQuery(document).on('ready', function() { 
    "use strict"; 
    /* ------------------------------------- 
      Set Page Height 
    -------------------------------------- */ 
    function headerFullScreen() { 
     var _vph = jQuery(window).height(); 
     jQuery('#header').css({'height': _vph + 'px'}); 
    } 
    function imgBoxFullscreen() { 
     var _vph = jQuery(window).height(); 
     jQuery('#imgbox').css({'height': _vph + 'px'}); 
     jQuery(window).scroll(function(){ 
      if(jQuery(window).scrollTop() >= _vph - 68){ 
       jQuery('.navigationarea').addClass('ontop'); 
      } 
     }) 
    } 
    window.onresize = function() { 
     headerFullScreen(); 
     imgBoxFullscreen(); 
    } 
    var refreshId = setInterval(refresh, 500); 
    function refresh() { 
     headerFullScreen(); 
     imgBoxFullscreen(); 
    } 
    /* ------------------------------------- 
      FIXED LOGO AND NAV 
    -------------------------------------- */ 
    jQuery(window).scroll(function(){ 
     var scrollTop = 1; 
     if(jQuery(window).scrollTop() >= scrollTop){ 
      jQuery('.logoholder, .navigationarea').css({ 
       position : 'fixed', 
       top : '0', 
       margin : '0' 
      }); 

      jQuery('.navigationarea').addClass('ontop-mobile'); 
      jQuery('.navigationarea').addClass('ontop'); 
      jQuery('.menu_lis').addClass('top_menu'); 
      jQuery('.straight-menu').addClass('hide_bottom_menu'); 


     }else{ 
        jQuery('.navigationarea').removeClass('ontop-mobile'); 
        jQuery('.navigationarea').removeClass('ontop'); 
        jQuery('.menu_lis').removeClass('top_menu'); 
        jQuery('.straight-menu').removeClass('hide_bottom_menu'); 

     } 
     if(jQuery(window).scrollTop() < scrollTop){ 
      jQuery('.logoholder').removeAttr('style'); 
      jQuery('.navigationarea').removeClass('ontop-mobile'); 
      jQuery('.navigationarea').removeClass('ontop'); 
      jQuery('.navigationarea').removeAttr('style'); 
     } 
    }) 
}); 

私もそれが動作する必要があるかを示すためにGIF画像を添付しています。 助けてください？

Answer 1

これが役に立ちます。

スクリプトの簡易版

$(window).scroll(function() { 
    var scrollTop = $(this).scrollTop(); 
    if (scrollTop > 0) { 
    $(".logo,.menu").css({ 
     position: 'fixed', 
     top: '0', 
     margin: '0' 
    }); 
    } else { 
    $(".logo,.menu").removeAttr('style'); 
    } 
}); 

https://jsfiddle.net/j3no7uy5/

Answer 2

私はダンがちょうど事故で彼の答えのうちの少し詳細を左にと考えています。 divの最初のオフセットをページの上部からスクロールした量と比較する必要があります。

スクロール距離が最初のオフセットよりも大きい場合は、スティッキーにします。それ以外の場合は元のスタイルに戻します。

私は以下のようにjQueryの.css()でスタイリングを行うことも、クラスを切り替えることもできますし、その両方を行うこともできます。それは何でもあなたのために働くものです。

例：

$(function() { 
 
    var targetDiv = $('#section1').find('.section-container'); 
 
    var sec1offset = targetDiv.offset().top; 
 

 
    $(document).scroll(function() { 
 

 
    var distY = $(document).scrollTop(); 
 

 
    if (sec1offset <= distY) { 
 
     $(targetDiv).css({ 
 
     position: 'fixed', 
 
     top: '0', 
 
     left: '10vw', 
 
     zIndex: '0' 
 
     }); 
 
    } else { 
 
     $(targetDiv).css({ 
 
     position: '', 
 
     top: '', 
 
     left: '', 
 
     zIndex: '' 
 
     }); 
 
    } 
 
    }); 
 

 
});

#section0 { 
 
    background-color: midnightblue; 
 
    width: 100%; 
 
    height: 60vh; 
 
} 
 

 
#section1 { 
 
    background-color: gold; 
 
    width: 100%; 
 
    height: 60vh; 
 
} 
 

 
#section1 .section-container { 
 
    width: 80%; 
 
    height: 30vh; 
 
    position: relative; 
 
    top: 20vh; 
 
    left: 10vw; 
 
    background-color: firebrick; 
 
} 
 

 
#section2 { 
 
    background-color: midnightblue; 
 
    width: 100%; 
 
    height: 100vh; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section id="section0"></section> 
 
<section id="section1"> 
 
    <div class="section-container"></div> 
 
</section> 
 
<section id="section2"></section>