固定的底部DIV停止一旦它到達另一個DIV

固定的底部DIV停止一旦它到達另一個DIV固定的底部DIV停止一旦它到達另一個DIV

#one{ 
 
\t width:100%;  
 
    background-color: aqua; 
 
\t position: fixed; 
 
\t bottom: 0px; 
 
\t padding: 30px 0; 
 
\t text-align: center; 
 
} 
 

 

 
#two{ 
 
\t width: 100%;  
 
    padding: 30px 0; 
 
\t text-align: center; 
 
    background-color: red; 
 
}

<div style="height: 900px; background: rgba(0,215,216,1.00)"></div> 
 
\t  <div id="one" class="fixed">Main Flagasd</div> 
 
\t \t <div id="two">div 2</div> 
 
\t \t <div style="height: 900px; background: rgba(152,215,216,1.00)"></div>

來源

2017-04-11 omkar

對您的部分不可見的努力，再加上自己以前的問題，http://stackoverflow.com/q/43185460/1427878 – CBroe

我會用scrollToFixed jQuery插件。它將大幅簡化您的代碼併產生理想的效果。我制定了一個關於如何使用它的例子。

$(document).ready(function() { 
 
    $('#one').scrollToFixed({ 
 
     bottom: 0, 
 
     limit: $('#two').offset().top, 
 
    }); 
 
});

#one{ 
 
    background-color: aqua; 
 
\t padding: 30px 0; 
 
\t text-align: center; 
 
} 
 

 

 
#two{ 
 
\t width: 100%; 
 
    padding: 30px 0; 
 
\t text-align: center; 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://bigspotteddog.github.io/ScrollToFixed/jquery-scrolltofixed-min.js"></script> 
 
<div style="height: 900px; background: rgba(0,215,216,1.00)"></div> 
 
\t  <div id="one" class="fixed">Main Flagasd</div> 
 
\t \t <div id="two">div 2</div> 
 
\t \t <div style="height: 900px; background: rgba(152,215,216,1.00)"></div>

來源

2017-04-11 10:07:20 Neil

你可以做這樣的事情。

我假設fixed div將在red div時更改其position。

var fixedDiv = document.querySelector('#one'); 
 
var redDiv = document.querySelector('#two'); 
 

 

 
redDiv.addEventListener('mouseover', function() { 
 

 
    fixedDiv.style.position = 'static'; 
 

 
});

#one { 
 
    width: 100%; 
 
    background-color: aqua; 
 
    position: fixed; 
 
    bottom: 0px; 
 
    padding: 30px 0; 
 
    text-align: center; 
 
} 
 

 
#two { 
 
    width: 100%; 
 
    padding: 30px 0; 
 
    text-align: center; 
 
    background-color: red; 
 
}

<div style="height: 900px; background: rgba(0,215,216,1.00)"></div> 
 
<div id="one" class="fixed">Main Flagasd</div> 
 
<div id="two">div 2</div> 
 
<div style="height: 900px; background: rgba(152,215,216,1.00)"></div>

來源

2017-04-11 09:49:32 Aslam

喜hunzaboy的副本，可以請你檢查參考鏈接一次。 https://www.marketo.com/ – omkar

如果可能，我需要相同的效果。 – omkar

你可以使用這個插件叫做ScrollToFixed

爲

$('.footer').scrollToFixed({ 
     bottom: 0, 
     limit: $('.footer').offset().top, 

    });

工作撥弄http://jsfiddle.net/ZczEt/2953/

來源

2017-04-11 09:58:05

如果你正在尋找一個沒有任何額外插件的解決方案，那麼可以做定製爲https://jsfiddle.net/livibetter/HV9HM/這個例子是頂部欄bix，但你可以理解的實現 –

固定的底部DIV停止一旦它到達另一個DIV

回答

相關問題