Jquery - 将 div 粘贴到页面底部答案

【问题标题】：Jquery - stick div to bottom of the pageJquery - 将 div 粘贴到页面底部
【发布时间】：2014-04-14 05:48:14
【问题描述】：

我发现许多插件可以让我将导航贴到页面顶部，或将页脚贴到页面底部。

但是，我在页面中间有一个 div，需要将它粘贴在底部，直到用户滚动到它为止。

有这个插件吗？

【问题讨论】：

标签： jquery jquery-plugins

【解决方案1】：

是的！你可以使用 waypoints.js http://imakewebthings.com/jquery-waypoints/

然后你可以这样调用：

$('.element').waypoint(function(direction){
    if(direction == 'down'){
        $(this).addClass('active');
    }else{
        $(this).removeClass('active');
    }
},{offset:'100%'});

那么对于 css 你可以这样做

.sticky-container.active .stick-me {
    position:relative;
}

.sticky-container .stick-me {
    background: blue;
    height: 50px;
    position:fixed;
    bottom:0;
}

.content {
    height: 1000px;
}

请注意，如果您在我的示例中将固定的 css 属性添加到标记为“.element”的元素，那么它可能会有点搞砸了。最好确保 div ".element" 实际上是您希望将固定 css 属性分配给的元素的包装器。

编辑*：抱歉误读了您的问题，以为滚动到元素时希望它具有粘性。我已经更新了上面的 css 以适合你和你的 jsfiddle，请注意我设置为 100% 的“偏移量”，这意味着它会在进入视口底部时添加一个类：http://jsfiddle.net/MNa7n/2/

【讨论】：

您能否更具体一点，我需要在元素中添加什么 CSS？
嗯，这几乎可行。我为此 jsfiddle.net/MNa7n 创建了 jsfiddle。我需要在页面加载时显示粘性，并且一旦它出现在页面上，就让它留在原来的位置（一旦我滚动到它就删除活动类）
谢谢！我遇到的最后一个问题是我在页面上有一些手风琴，当我展开一些手风琴时，没有反映更改并且粘性元素在我滚动到它之前很快消失了......有什么解决方法吗？
当然我很乐意提供帮助，如果您将我的答案标记为最佳答案可能会更好，所以这有点封闭然后开始一个新问题并将我链接到它（使用另一个 jsfiddle） .
这是新话题：stackoverflow.com/questions/23058578/…