如何使滚动页脚然后固定回滚动

Question

您好所有，我已经看到了所有这些粘页脚脚本，粘侧边栏的脚本！我想要的是类似的东西，我有一个页脚很长的页面，然后在页脚下面有更多的内容，我希望页面只在内容到达页脚时显示页脚，一旦页脚显示在屏幕上，它会得到固定在底部，这样我就可以继续滚动页面并查看“更多内容”，并且在向后滚动时，页脚从固定底部分离回到正常！

我附上了截图，可能有助于更好地解释它！

Answer 1

那么它需要一些步骤......

• 获取多少窗口滚动。
• 检查它是否滚动超出了我们希望页脚开始充当固定点的角度。
• 该点是窗口高度 - 页脚高度的总和。
• 如果这一点再次回到原来的状态。
• 添加功能来滚动事件。因此，如果需要的话，检查一切并完成工作。

演示这里请参见：http://jsfiddle.net/techsin/MgQQm/2/embedded/result/

见代码在这里： http://jsfiddle.net/techsin/MgQQm/2/

$footer = $('#footer'); 
$win = $(window); 
var ipos = $footer.offset().top; 
var wpos, space, width; 
width = $footer.width(); 

function h(e) { 
    wpos = $win.scrollTop(); 
    space = $win.height() - $footer.height(); 
    if ((wpos + space) > ipos) { 
     $footer.addClass('fixed'); 
     $footer.width(width); 
    } else { 
     $footer.removeClass('fixed'); 

    } 
} 


$(window).scroll(h); 

Answer 2

在css之前，你可以保留它到position:fixed;。

或者使用JQuery的是，

$('footer').css({position:'fixed'}); 

或纯JS，

document.getElementByTagName('footer').style.position = 'fixed'; 

为了使滚动后使用jQuery，

$('footer').css({position:'relative'}); 

或者使用JavaScript，

document.getElementByTagName('footer').style.position = 'relative'; 

Answer 3

<div id="content"></div> 
<div id="moreContent"></div> 
<div id="footer"></div> 

CSS

#content { 
    height:1000px; 
    width:400px; 
    position: relative; 
    z-index: 2; 
    background-color:red; 
} 
#moreContent{ 
    height:500px; 
    width:450px; 
    margin:0px 0px 100px 0px; 
    position: relative; 
    z-index: 0; 
    background-color:yellow; 
} 
#footer { 
    position: fixed; 
    bottom: 0; 
    width:400px; 
    left: 8px; 
    right: 0; 
    height: 100px; 
    z-index: 1; 
    background-color:blue; 
} 

demo

Answer 4

您的页脚元素

.sticky { 
    width: 100%; 
    position:fixed; 
    background: #F6D565; 
    padding: 25px 0; 
    top:700px; 
    text-transform: uppercase; 
    } 

CSS的演示CHK这JSFIDDLE