在页脚顶部滚动div停止

Question

我试着做一些类似http://jsfiddle.net/Kkv7X/的事情

目前，我的脚本运行良好，但是当我向下滚动页面并到达页脚部分时，滚动div (在我的例子中是.粘滞页脚)从屏幕上消失。

我想要做的是，当我到达页脚部分时，滚动的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

当滚动到达页脚时，它们(http://uk.marketo.com/software/)只会更改粘性按钮的样式。因此，您只需在滚动条到达页脚时侦听，并更改您的粘性元素作为响应。

要收听我推荐使用https://github.com/imakewebthings/waypoints的滚动条，我认为是处理滚动动画、侦听器等的更容易的库之一。

应用于粘性元素的样式应更改

.sticky{
  position  : fixed;
  bottom : 0;
}

至：

.sticky.reached{
   position : absolute;
   bottom : 400px; //or whatever.

.sticky是粘性元素(或元素或包装器等)的类。当滚动条到达页脚时，.reached就是添加到其中的类。当滚动条再次上升时，你几乎必须脱帽。即(使用路径点)：

$("footer").waypoint(function(direction){
    if(direction == 'down')
       $('.sticky').addClass('reached');
    else
       $('.sticky.reached').removeClass('reached');   

});

Answer 2

你的问题是，你的脚是高于你的其他粘性页脚。如果你能把它放在最底层，它就能工作：

​

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

​