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具有position：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>

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

当你向下滚动200px时，这将修复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>

希望它有所帮助。如果没有，你可能会有一些课程重写或妨碍这个词缀的正确功能。

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

<强> SCROLL：使用溢出来滚动内容：

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

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

Answer 2

如果我理解你的场景是正确的，那么这样做的方法可能是使用jQuery（或原生JS，但你已经标记了jQuery，所以我假设它正在发挥作用）。< / p>

有一个处理此类事情的插件：http://leafo.net/sticky-kit/

我建议您查看插件源代码以查看其工作原理 - $(window).scroll()上的事件处理函数，然后切换#thread_menu上的类以将其修复到位。为了保持代码的轻量级，您可能不需要插件提供的所有内容。

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

2 个答案: