divを動的に修正するときに点滅が止まらない

divの位置がウィンドウビューからスクロールされたら、ウィンドウの一番下にdivを固定します。私は、それが姿勢がスクロールバックされているときにそれを固定します。スクロールがゆっくりと行われると、恐ろしい揺れがあります。これに対抗する方法はありますか？divを動的に修正するときに点滅が止まらない

DEMO https://jsfiddle.net/3146nxLx/

var initSet = false; 
$(window).scroll(function() { 
    if (isScrolledIntoView($('#myDivTrigger'))) { 
    if (!initSet) { 
     initSet = true; 
    } 
    $("#myDiv").removeClass('fixed'); 
    } else if (initSet) { 
    $("#myDiv").addClass('fixed'); 
    } 
}); 

function isScrolledIntoView(elem) { 
    var $elem = $(elem); 
    var $window = $(window); 

    var docViewTop = $window.scrollTop(); 
    var docViewBottom = docViewTop + $window.height(); 

    var elemTop = $elem.offset().top; 
    var elemBottom = elemTop + $elem.height(); 

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
}

出典

2016-04-12 Anonymous

でクローニングせずに別の可能な解決策があるか、余分なブロックを使用becau DOMフロー内の1つの要素を「削除」しています（一時的に）。 –

安全なマージンを使用してください。 –

固定されたものの重複した要素を作成したり削除したりすることができます（js経由）。 –

あなたはtriggerが、見えるようになってきて、それの場所にポップアップされ、固定された要素を設定しているためです。ラッパーを作成し、それに相対位置を与え、絶対位置を設定するトリガーを設定する必要があります。このようにして、固定divの位置が変わると、トリガーの位置は移動しません。

DEMO https://jsfiddle.net/3146nxLx/1/

<div id="myDivWrap"> 
    <div id="myDiv"> 
    <p> 
     This should be fixed once it comes into view and then goes out of view. 
    </p> 
    </div> 
    <span id="myDivTrigger">trigger</span> 
</div>

遷移が滑らかであるので、あなたも、トリガーにbottom値を与えることができます。はい、それに左の値を与えてください。

DEMO https://jsfiddle.net/3146nxLx/3/

ここ@Lionelによって示唆されるように、半論理に基づいて、例です。 divをクローンして追加します。これはまた、トリガを必要としないことを意味します。

DEMO https://jsfiddle.net/3146nxLx/4/

出典

2016-04-12 14:10:10 Vector

ベクタに感謝します。私は設定の高さとラッパーの作成を節約するので、私はあなたの最後の例と一緒に行くと思う。 –