javascript - 修复底部 div 到达另一个 div 后停止的问题

Question

修复了底部 div 到达另一个 div 后停止的问题

供引用-https://www.marketo.com/

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

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>