Question

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

目前我的脚本工作正常，但当我向下滚动页面并到达页脚部分时，滚动div（在我的情况下为.sticky-footer）从屏幕上消失。

我想要做的是当我到达页脚部分时，滚动的div应该保持在我的页脚顶部。我怎么能这样做？

这是我的代码

Directory = System.AppDomain.CurrentDomain.BaseDirectory;
using(System.IO.StreamWriter file = new System.IO.StreamWriter(Directory, false))
{
    // File contents
}

CSS

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

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

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>

Answer 2

当滚动到达页脚时，它们（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是滚动条到达页脚时添加的类。当滚动条再次上升时，你几乎必须取消它。 I.E. （使用航路点）：

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

});

滚动div停在页脚顶部

2 个答案: