使div滚动直到它到达页面顶部然后固定

Question

我们直接进入正题吧：

我的代码如下所示：

<div id="keep_up">
    <div id="thread_menu">
        <div id="new_thread">

        </div>
    </div>
</div>

还有我的CSS：

#keep_up {
    position: fixed;
    width: 13%;
}

 #thread_menu{
     height: 80vh;
     width: 100%;
     float: left;
     position: relative;
}
    

现在我用它来做论坛。这基本上是为了在屏幕一侧显示活动的和新的线程。

但是。当观看线程时，标题消失（这是有道理的，因为我们正在向下滚动）。

但我希望线程菜单留在我这边（以便它始终可见）。 在这种情况下，发生这种情况是因为我的 keep_up div 的位置：固定。但我只看到一半的线程菜单，因为它太长并且不会向上滚动。

我的问题：

我希望线程菜单向上滚动，直到到达窗口顶部。从那时起我希望它留在那里。

我该怎么做？

我看到了一些例子，但没有一个对我有用。

编辑：我尝试过的代码：

<script src="jquery.min.js">
    $(window).scroll(function () {
        var margin = null;
        $(window).on("scroll", function () {

            var scrollHeight = $(document).height(),
                scrollTop = $(window).scrollTop(),
                offsetBottom = 110, // Offset depending on the height of the footer
                offsetTop = 100, // Offset depending on the height of the header
                positionTop = $(".keep_up").offset().top,
                affix;


            if (margin != null && (scrollTop + margin <= positionTop)) {
                // The sidebar has reached the bottom and is still on the bottom
                affix = false;
            } else if (positionTop + $(".keep_up").height() >= scrollHeight - offsetBottom) {
                // The sidebar has reached the bottom
                affix = 'bottom';
            } else if (scrollTop <= offsetTop) {
                // The sidebar has reached the top
                affix = 'top';
            } else {
                // The sidebar is midway
                affix = false;
            }
            // If the sidebar hasnot changed his state, return;
            if ($(".keep_up").hasClass('at' + (affix ? '-' + affix : ''))) return;

            if (affix == 'bottom') {
                margin = positionTop - scrollTop;
            } else {
                margin = null;
            }
            // If the related class is added to the div
            $(".keep_up").removeClass('at at-top at-bottom').addClass('at' + (affix ? '-' + affix : ''))

        });
    });
</script>

还有 CSS：

.keep_up{
    /*position: fixed;*/
    width: 13%;
}

.keep_up.at {
    top: 1px;
    position: fixed;
}

.keep_up.at-top{
}

.keep_up.at-bottom {
    top: 438px;
    position: absolute;
}

Answer 1

在 HTML 上修改此内容：

<div id="prevent"></div>
<div id="keep_up" data-spy="affix" data-offset-top="200">

添加此 CSS：

.affix{position: fixed !important; top:0px; z-index:999;}
.affixpatch{margin-top:100px !important;}

当您向下滚动 200 像素时，这将修复 div。更改 data-offset-top 值以在不同的断点处达到它。 .affixpatch 是一个将被下一个 jquery 函数加载的类。它可以防止将内容隐藏在顶部固定 div 后面。如果这不能解决始终生成固定 div 的“隐藏内容”问题，请将 margin-top 更改为另一个值。

<script>
$(function() {
    //caches a jQuery object containing the header element
    var header = $(".affix");
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();
        if (scroll >= 200) {
            $('#prevent').addClass("affixpatch");
        } else {
            $('#prevent').removeClass("affixpatch");
        }
    });
});
</script>

希望有帮助。如果没有，你可能有一些类重写或阻碍了这个词缀的正确功能。

我已经测试了数百次，通常是为了修复导航栏。

滚动： 使用溢出来滚动内容：

#keep_up{
   max-height:400px;
   width: auto;
   overflow:auto;}

这将滚动 #keep_up div 内的内容（或在另一个 div 中使用它） 注意：您必须为此 div 声明一个固定的最大高度。仅在需要时设置最大宽度。 您可以使用 %、em、rem...无需使用 px 来修复最大宽度。 （要获得响应效果，请使用响应测量）

Answer 2

如果我正确理解你的场景，那么执行此操作的方法可能是使用 jQuery （或本机 JS，但你已经标记了 jQuery，所以我假设它正在发挥作用）。

有一个插件可以处理这种事情：http://leafo.net/sticky-kit/

我建议您查看插件源代码以了解其工作原理 -

$(window).scroll()

上的事件处理函数，然后切换

#thread_menu

上的类以将其修复到位。为了保持代码轻量级，您可能不需要插件提供的所有内容。