特定のスクロール期間にHTMLセクションの位置を固定する方法はありますか？

Question

HTML構造のようなものです：

<header> ..content </header> 
<section class="sec-1"> ..content </section> 
<section class="sec-2"> ..content </section> 
<section id="sec-3"> 
    <div class="item-1" style="opacity:1"> <img src="exm.jpg" alt=""> </div> 
    <div class="item-2" style="opacity:0"> <img src="exm.jpg" alt=""> </div> 
    <div class="item3" style="opacity:0"> <img src="exm.jpg" alt=""> </div> 
</section> 
<section id="sec-4"> ..content </section> 
<section class="sec-5"> ..content </section> 
<footer> ..content </footer> 

#sec-3がhttp://prntscr.com/c97u0zなどの下部に表示されます場合は、ページのスクロールが#sec-3内部.item-1の同じ場所で.item-2、.item-3が表示されます、私は一番下を意味します。その後、ページは通常どおり#sec-4にスクロールします。

私はこの方法を試してみた：

function getId(element) { 
    return document.getElementById(element); 
} 

function scroll_effect() { 
    var yPosition = window.pageYOffset, 
    targetPos = getId('sec4').offsetTop - screen.availHeight; 
    if(yPosition > targetPos) { 
    $('.item-2').css('opacity', '0'); 
    $('.item-1').css('opacity', '1'); 
    $('.item-3').css('opacity', '0'); 
    } 
    if(yPosition > targetPos + getId('sec3').offsetHeight - (getId('sec3').offsetHeight/2)) { 
    $('.item-2').css('opacity', '1'); 
    $('.item-1').css('opacity', '0'); 
    $('.item-3').css('opacity', '0'); 
    } 
    if(yPosition > targetPos + getId('sec3').offsetHeight) { 
    $('.item-2').css('opacity', '0'); 
    $('.item-1').css('opacity', '0'); 
    $('.item-3').css('opacity', '1'); 
    } 
} 
window.addEventListener("scroll", scroll_effect); 

それは#sec-4内の変更インナーアイテム.item-1、.item-2、.item-3を作ったが、私は、私は変更の時に下部に#sec4を貼り付けない方法を見つけ出すことはできませんページスクロールの内部項目。

また、同様の方法で下から上にスクロールすると逆になります。

Answer 1

＃se4をページの下部に貼りたい場合は、jQueryでそのCSSプロパティを変更するだけです。 そして、あなたは下の

#se4 { 
    position: fixed; 
    bottom: 0; 
} 

Answer 2

に別のセクションを修正したい場合は、CSSのオーバーフローパラメータを試すことができ、それを削除します。 sec-3にwidth: 500px;height: 500px;overflow: scroll;を追加します。 このメソッドではJavaScriptコードは必要ありません。

<section class="sec-1"> 
    ..content 
</section> 
<section class="sec-2"> 
    ..content 
</section> 
<section id="sec-3" style="width: 500px;height: 500px;overflow: scroll;"> 
    <div class="item-1" style="opacity:1"> 
     <img src="https://pbs.twimg.com/profile_images/604644048/sign051.gif" alt=""> 
    </div> 
    <div class="item-2" style="opacity:1"> 
     <img src="https://pbs.twimg.com/profile_images/604644048/sign051.gif" alt=""> 
    </div> 
    <div class="item3" style="opacity:1"> 
     <img src="https://pbs.twimg.com/profile_images/604644048/sign051.gif" alt=""> 
    </div> 
</section> 
<section id="sec-4"> 
    ..content 
</section> 
<section class="sec-5"> 
    ..content 
</section>