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

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

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

在之前的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 4

你的页脚元素css

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

对于演示chk JSFIDDLE