粘滞边栏不滚动应该是这样的

Question

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

我的一个朋友帮助我在一个非常基本的模板上粘贴了一个“粘性”侧栏，该侧栏应该是最大窗口高度并粘在右侧，直到页脚出现在该点时，它应该像常规内容一样向上滚动。在我看来，它似乎隐藏在页脚元素后面。我的JavaScript/jQuery技能接近于空，我不知道如何解决这个问题。我问了两个朋友，但他们也帮不了我。

我把一切都上传到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。这样，当您从DOM的正常流程中删除边栏时（当您添加position: fixed时），您不会有怪异的行为。所以：

.main-content { 
    ... 
    min-height: 100vh; 
} 

2）你正在使用浮动。总是，总是clear floats。这是因为添加:after伪元件.content简单：

.content:after { 
    content: ''; 
    clear: both; 
    display: table; 
} 

这防止了浮动元素的父塌陷，允许你相对于亲本的尺寸/位置的儿童。你会需要这个步骤4

3）只是一个设置变化：移动.footer的main标签以外，所以不是这样的结构：

<main> 
    ... 
    <aside>...</aside> 
    <div class="footer"></div> 
</main> 

你有这样的：

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

（我也使用HTML5 footer标签并更改CSS选择器）。这使得下一步可能：

4）改变.footer-fix的CSS：

.footer-fix { 
    position: absolute; 
    bottom: 0; 
    right: 0; 
} 

所以，当你准备解除固定侧边栏，你会绝对在其母公司的底部位置它。为了使这项工作，你还需要创建父堆叠环境（.content）：

.content { 
    ... 
    position: relative; /* defines a new stacking context */ 
} 

5）最后，你的JavaScript将是这样的：

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

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

您可能还想要处理窗口大小调整并在页面加载时触发window上的滚动。

这是一个工作CodePen。祝你好运。