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

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

演示

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