固定的底部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

回答

相关问题