Question

固定底部div一旦到达另一个div

就停止

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 1

我使用scrollToFixed jQuery插件。它将大大简化您的代码并产生所需的效果。我举了一个关于如何使用它的例子。

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

#one{
  background-color: aqua;
	padding: 30px 0;
	text-align: center;
}


#two{
	width: 100%;
  padding: 30px 0;
	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>
	    <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>

Answer 2

你可以这样做。

我假设当fixed div到达position时red div会更改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>

  811-834-8888
  1-800-ABC-PLAN Ext- 101

Answer 3

您可以使用名为ScrollToFixed

的此插件

as

              A ("123")
              |
              |
        --------------
       |              |
       B              C
("Modified Here")  ("123") this is inherited from A

  So it prints "123"

工作小提琴http://jsfiddle.net/ZczEt/2953/

固定底部div一旦到达另一个div就停止

3 个答案: