特定のdivまたは特定の位置で固定位置を停止する

他の要素に接触する前にスクロールで固定位置を取得するdivを停止する必要があります。基本的に特定の位置で絶対位置に戻るようにします。画面の任意のサイズ。私はコードでjsfiddleを持っていますし、2つの要素があります、あなたが答えを知っている場合は、例を参照して助けてください！特定のdivまたは特定の位置で固定位置を停止する

var navTop = $('#nav').offset().top; 
var lastMode = "absolute"; 

$(window).scroll(function(){ 
var mode; 
if ($(this).scrollTop() >= navTop) { 
    mode = 'fixed'; 
} else { 
    mode = 'absolute'; 
} 

if(lastMode !== mode) { 
    if (mode == 'fixed') { 
     $('#nav').css('position', 'fixed'); 
     $('#nav').css('top', '0'); 
    } else { 
     $('#nav').css('position', 'absolute'); 
     $('#nav').css('top', navTop); 
    } 
    lastMode = mode; 
} 
});

https://jsfiddle.net/Zygimantas10/vro3LLu9/

これが明確でない場合は私に知らせてください。

出典

2017-07-26 Z3K

このようにしますか？スニペットは、エラーになります

var navTop = $('#nav').offset().top; 
 
var navStop = $('#stop').offset().top; 
 
var lastMode = "absolute"; 
 

 
$(window).scroll(function() { 
 
    var mode; 
 
    if ($(this).scrollTop() >= navTop) { 
 
    if ($(this).scrollTop() - navStop + $('#nav').height() > 0) 
 
     mode = 'absolute'; 
 
    else 
 
     mode = 'fixed'; 
 
    } else { 
 
    mode = 'absolute'; 
 
    } 
 

 
    if (lastMode !== mode) { 
 
    if (mode == 'fixed') { 
 
     $('#nav').css('position', 'fixed'); 
 
     $('#nav').css('top', '0'); 
 
    } else { 
 
     $('#nav').css('position', 'absolute'); 
 
     $('#nav').css('top', navTop); 
 
    } 
 
    lastMode = mode; 
 
    } 
 
});

#nav { 
 
    background: rgba(0, 0, 0, 0.5); 
 
    position: absolute; 
 
    top: 200px; 
 
    width: 100px; 
 
    height: 50px; 
 
} 
 

 
#stop { 
 
    width: 100%; 
 
    background: blue; 
 
    height: 300px; 
 
    position: absolute; 
 
    top: 900px; 
 
    margin-top: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body style="height:5000px;"> 
 
    <div id="nav"></div> 
 
    <div id="stop"></div> 
 
</body>

出典

2017-07-26 13:37:24 Cylexx

は、あなたがダブルチェック – Z3K

編集ができ、私はjQueryのライブラリを追加するのを忘れ – Cylexx

ええIVEは逃した私はあなたの助けをありがとう:)コメントを削除した理由のthatsは病気にそれを置くこと解決された – Z3K

特定のdivまたは特定の位置で固定位置を停止する

答えて

関連する問題