在某個div或某個位置停止固定位置

我需要停止一個div，它在滾動到一個固定位置之前觸摸另一個元素，基本上使其返回到某個位置的絕對位置，並且這應該在任何尺寸的屏幕。我有一個帶有代碼的jsfiddle，有兩個元素，請參閱示例和幫助，如果您知道答案，謝謝！在某個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

是的香港專業教育學院錯過了這就是爲什麼我刪除了評論:)感謝您的幫助患病把它如解決 – Z3K

在某個div或某個位置停止固定位置

回答

相關問題