javascript - 滚动 div 停止在页脚顶部

Question

我正在尝试做类似的事情 http://jsfiddle.net/Kkv7X/

目前我的脚本工作正常，但是当我向下滚动页面并到达页 footer 分时，滚动 div(在我的例子中为 .sticky-footer)从屏幕上消失。

我想做的是，当我到达页 footer 分时，滚动 div 应保留在页脚顶部。我怎样才能做到这一点？

这是我的代码

$(document).ready(function () {
        
    // sticky footer scroll effect
    $(document).scroll(function() {
        if($('.sticky-footer').offset().top + $('.sticky-footer').height() >= $('#footer').offset().top - 10) {
            $('.sticky-footer').css('position', 'absolute');
        }
        			    
        if($(document).scrollTop() + window.innerHeight < $('#footer').offset().top) {
            $('.sticky-footer').css('position', 'fixed'); // restore when you scroll up
        }
    });
});

CSS

html {
    	position: relative;
    	min-height: 500px;
    }
    .sticky-footer {
    	position: fixed;
    	bottom: 0;
    	background-color: rgba(	255, 255, 255, 0.5);
    	text-align: center;
    	width: 100%;
    	height: 60px;
    	padding: 15px 0;
    }

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sticky-footer">
    		<div class="container">
    			<div class="row">
    				<div class="col-md-12">
    					 // code here ...
    				</div>
    			</div>
    		</div>
    	</div>
    	
    	<footer id="footer">
    		<div class="container">
    			<div class="row">
    
                      // code here ...
                </div>
    		</div>
    	</footer>

Answer 1

您的问题是您的页脚位于其他粘性页脚上方。如果你能把它放在最底层，它就会起作用:

$(document).ready(function () {
        
        			// sticky footer scroll effect
        			$(document).scroll(function() {
        				if($('.sticky-footer').offset().top + $('.sticky-footer').height() >= $('#footer').offset().top - 10) {
        					$('.sticky-footer').css('position', 'absolute');
        				}
        			    
        				if($(document).scrollTop() + window.innerHeight < $('#footer').offset().top) {
        					$('.sticky-footer').css('position', 'fixed'); // restore when you scroll up
        				}
        			});
        });

html {
    	position: relative;
    	min-height: 500px;
    }

footer {
  position: absolute;
  bottom: -500px;
  height: 500px;
  }

.sticky-footer {
    	position: fixed;
    	bottom: 0;
    	background-color: rgba(	255, 255, 255, 0.5);
    	text-align: center;
    	width: 100%;
    	height: 60px;
    	padding: 15px 0;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sticky-footer">
    		<div class="container">
    			<div class="row">
    				<div class="col-md-12">
    					 // code here ...
    				</div>
    			</div>
    		</div>
    	</div>
    	
    	<footer id="footer">
    		<div class="container">
    			<div class="row">
    
                      // code here ...
                </div>
    		</div>
    	</footer>