Question

各位大家好，感谢您花时间阅读本文。

我的一位朋友帮助我将一个非常基本的模板与一个＆＃34;粘性＆＃34;侧边栏应该是最大窗口高度并且粘在右侧，直到页脚出现在该点，它应该像常规内容一样向上滚动。在我的情况下，似乎＆＃34;隐藏＆＃34;在页脚元素后面。我的javascript / jquery技能接近于null，我不知道如何解决这个问题。我问了两个朋友，但他们也帮不了我。

我已将所有内容上传到codepen http://codepen.io/anon/pen/JGMXOJ。

.footer-fix {
position: fixed;
top: 0;
right: 0;
height: 100vh;
}

当侧边栏应该开始向上滚动时，会应用.footer-fix类，但是它会失败。

Answer 1

一些事情：

1）由于边栏上的固定高度为100vh，因此您应确保其.main-content对应方的min-height至少为position: fixed。这样，当您从DOM的正常流程中删除侧边栏时（当您添加.main-content { ... min-height: 100vh; }时），您就没有怪异的行为。所以：

:after

2）你正在使用花车。永远，始终clear floats。这就像向.content添加.content:after { content: ''; clear: both; display: table; }伪元素一样简单：

.footer

这可以防止浮动元素的父级折叠，允许您相对于父级调整子项的大小/位置。第4步你需要这个。

3）只需更改设置：将main移到<main> ... <aside>...</aside> <div class="footer"></div> </main>标记之外，而不是此结构：

<main>
    ...
    <aside>...</aside>
</main>
<footer>...</footer>

你有这个：

footer

（我还使用HTML5 .footer-fix标签并更改CSS选择器）。这使下一步成为可能：

4）将.footer-fix { position: absolute; bottom: 0; right: 0; }的CSS更改为：

.content

因此，当您准备解开侧边栏的修补程序时，您绝对会将其放在其父级的底部。要使其工作，您还需要为父级（.content { ... position: relative; /* defines a new stacking context */ }）创建堆叠上下文：

var $wannaBeSticky = $('.sidebar'),
    currentPosition = $wannaBeSticky.offset().top,
    footerOffset = $('footer').offset().top;

$(window).scroll(function(event) {
    var scrollTop = $(this).scrollTop();

    if (scrollTop >= currentPosition) {
        $wannaBeSticky.addClass('fix');
    } else {
        $wannaBeSticky.removeClass('fix');
    }

    if (scrollTop + $(this).height() >= footerOffset) {
        $wannaBeSticky.removeClass('fix').addClass('footer-fix');
    } else {
        $wannaBeSticky.removeClass('footer-fix');
    }
});

5）最后，您的JavaScript将如下所示：

window

这与之前的内容非常相似，我只是清理了代码并改进了添加/删除类的逻辑。

您可能还希望处理窗口大小调整并在页面加载时触发map(...)上的滚动。

这是一个有效的CodePen。祝你好运。

粘性侧边栏不会滚动它应该的方式

1 个答案: