Javascript 制作div scoll，直到它到达页面顶部，然后修复

让我们直截了当地说：

我的代码如下所示：

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

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

现在我用这个论坛。这基本上是在屏幕一侧显示活动线程和新线程

不过。当观看一个线程时，标题会消失（这是有意义的，因为我们正在向下滚动）

但是我希望线程菜单保持在我这边（这样它总是可见的）。在这种情况下，发生这种情况是因为我的keep_up div的位置是：fixed。但我只看到一半的线程菜单，因为它太长，不会向上滚动

我的问题:

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

我该怎么做

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

编辑：我尝试过的代码：

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

---

如果我正确理解了您的场景，那么实现这一点的方法可能是使用jQuery（或者原生JS，但是您已经标记了jQuery，所以我假设这是可行的）

有一个插件可以处理这类事情：

我建议您查看插件源代码，看看它是如何工作的-在

$（window.scroll（）

上的一个事件处理程序函数，然后在

#thread_

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

在HTML上修改此选项：

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

这将修复向下滚动200px时的div。更改数据偏移上限值以在不同的断点上达到该值。 .affixpatch是一个将随下一个jquery函数加载的类。它防止在顶部固定div后面隐藏内容。如果这不能解决总是生成粘贴div的“隐藏内容”问题，请将边距顶部更改为另一个值

<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 div中的内容（或在另一个div中使用） 注意：您必须为此分区声明一个固定的最大高度。仅在需要时设置最大宽度。

---

您可以使用%，em，rem。。。无需使用px来固定最大宽度。（要获得响应性效果，请使用响应性测量）

希望您至少尝试自己编写代码。堆栈溢出不是代码编写服务。我建议你做一些，或者通过谷歌，或者通过搜索，尝试一下。如果您仍然有问题，请返回您的代码，并解释您尝试了什么以及为什么它不起作用。正如我所说，我尝试了几个示例（我能找到的所有示例），但这两个示例都不适用于我。我现在只做这件事已经三个小时了。所以我认为请求帮助是可以的，我不会让别人为我写整件事。只是请求帮助，我也没有得到：带着你的代码回来。这是我写的代码。可能是@Mitch的副本。您需要向我们展示您尝试过的jquery，并告诉我们为什么它不起作用。就目前情况而言，您的问题显示没有尝试这样做，并且看起来像一个请为我编写此代码的问题将进行编辑@pete谢谢，将查看该问题。不起作用：/it不滚动。我会检查其他类是否做了什么，但我不认为很抱歉，我忘记了滚动：P让我编辑它，5分钟内刷新溢出自动，它只是在一个可滚动的视图中打开概览xd当然，在你想要滚动的div中添加这个。（这将使该div仅在必要时可滚动（如果其中的内容导致溢出）。抱歉，我忘了说您必须将这些样式添加到。粘贴类仅在其固定（粘性）时使用溢出自动。如果它在非粘性情况下导致溢出自动，请在滚动顶部将其还原。在这种情况下添加溢出：无。（我正在做你所有的家庭作业呵呵）干杯！

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

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

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