親の位置に応じてdivをスクロールします

2つの子divを持つ親divがあります。親がビューポート内にあるときは最初の子を修正する必要があります。 2番目の子は、スクロールして最初の子を重ねる必要があります。両方の子divは、親の一番下に達するとすぐに削除し、親に従ってください。親の位置に応じてdivをスクロールします

今、スクロール位置にクラスを追加していますが、子が親の一番下にあるときを検出してクラスを削除する方法がわかりません。

var sticky = $('.sticky'), 
    scroll = $(window).scrollTop(); 

if (scroll >= 70) { 
    sticky.addClass('fixed'); 
} else { 
    sticky.removeClass('fixed'); 
}

子供のdivが最良の方法で親に従うようにするにはどうすればよいですか？私は似たようなものを探してみたいと思っていますが、良い説明はありません。

このfiddleはこれまでのところ私が得たものです。

出典

2017-07-12 jdo

これを試してください：https://css-tricks.com/position-sticky-2 – vsync

JSを使用したい場合、['stickyfloat'スクリプト]（https://github.com/yairEO/stickyfloat）は何をしますか？あなたがほしい – vsync

答えをありがとう、私はプラグインなしでそれを解決しようとしているが、私はそれが簡単にカスタマイズすると思います。しかし、私は例を見ていきます。 – jdo

私はこれを正しく理解していた場合、何を行う可能性がdocument.bodyに親divの尺度bottomと子スティッキーdiv相対的であり、子要素の下交差親の下の場合は、.fixedクラスを削除することができます。

このようなものです。

$(window).scroll(function(){ 
 
    var sticky = $('.sticky'), 
 
     scroll = $(window).scrollTop(); 
 
    if (scroll >= 70) { 
 
    sticky.addClass('fixed') 
 
    }else { 
 
    sticky.removeClass('fixed'); 
 
    } 
 
    if(getBottom('.sticky') >= getBottom('.holder')){ 
 
    \t sticky.removeClass('fixed'); 
 
    } 
 
}); 
 

 
function getBottom(element){ 
 
    var $elm = $(element); 
 
    var offset = $elm.offset(); 
 
    var top = offset.top; 
 
    return top + $elm.outerHeight(); 
 

 
}

body { margin: 0; } 
 

 
section { 
 
    height: 2000px; 
 
    padding-top: 100px; 
 
} 
 

 
div { 
 
    width: 300px; 
 
    height: 100px; 
 
} 
 

 
.holder { 
 
    border: 1px solid black; 
 
    width: 500px; 
 
    height: 200px; 
 
    position: relative; 
 
} 
 

 
.sticky { 
 
    top:30px; 
 
    left:10px; 
 
    background: orange; 
 
    z-index: 9999; 
 
    position: relative; 
 
} 
 

 
.other-div { 
 
    background: gold; 
 
    top: 20px; 
 
    z-index: 0; 
 
} 
 

 
.fixed { 
 
    position: fixed; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>Divs</title> 
 
</head> 
 
<body> 
 
<section> 
 
    <div class="holder"> 
 
    <div class="other-div fixed">This div should stay fixed for a while</div> 
 
    <div class="sticky">This div will become fixed on scroll</div> 
 
    </div> 
 
</section> \t 
 
<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
 
</body> 
 
</html>

上記のスニペットhttps://jsfiddle.net/azs06/3ubshm4t/7/ 注Jsfiddle、私はあなたが必要としてあなたが調整することができ、いくつかのCSSの変更を、作りました。

出典

2017-07-12 11:09:42 azs06

お返事ありがとうございました。ご返信ありがとうございます。私はコードを編集し、他のdivにスティッキークラスを追加しましたが、divの動きにはsomの問題があります。今、最初のdivは正しく動作しますが、他のdivはその位置にジャンプし、次に底に達すると親の外にジャンプします。どのようにしてスムーズにスクロールさせることができますか？更新されたfiddle：https://jsfiddle.net/jdornell/f3o9goau/ – jdo

あなたはオレンジ色のdivを参照していますか？最初はこれは 'position：relative'にあり、' 70px 'を超えて一度スクロールすると 'position：fixed'になり、コンテナの底がこのdivと同じレベルになると再びposition：relativeになります。これはあなたが望むものではありませんか？ – azs06

はい、私が欲しいものですが、divをジャンプせずに固定位置にしたいと思っています。現在のところ、オレンジ色のdivは位置にジャンプします。何故ですか？ – jdo

親の位置に応じてdivをスクロールします

答えて

関連する問題