Question

我正在尝试修改布局顶部的div，其中包含博客帖子的信息（发布日期，＃个音符，固定链接等），并在向下滚动过去的帖子时更改此信息。我不确定它是否需要任何类型的JavaScript或只是使用CSS的一些复杂的定位。这是我如何布置帖子。当帖子滚过它时，如何从每个帖子中获取特定的帖子信息以在固定的div中进行更改？

#container {
    width: 960px;
    margin: 0px auto;
}

#changingpostinformation {
    position: fixed;
    margin: 0px auto;
}

<div id="container">

    <div id="changingpostinformation">fixed post information div that's information changes as each post below reaches the top of #container</div>

        <div class="post">
            <h3>Post Title>
            <p>This is the body of this example post.</p>
        </div>

        <div class="post">
            <h3>Post Title>
            <p>This is the body of this example post.</p>
        </div>

    </div>

Answer 1

就像@ShankarSangoli说的那样，你应该将top: 0;和left: 0;添加到#changingpostinformation（或者根据你的意愿定位其他值）

您需要一些javascript才能找到首先在页面上显示哪些帖子并显示其信息。

$(function() {
    $(window).bind('load resize scroll', function() {
        var doctop = $('body').scrollTop();

        // loop over all posts, from top to bottom
        $('.post').each(function() {
            if ($(this).position().top > doctop) {
                put_postinfo_in_fixed_div($(this));
                return false; // breaks from the loop
            }
        });
    });
});

此功能在加载页面时运行一次，也在窗口调整大小或滚动时运行。

你需要实现put_postinfo_in_fixed_div()来获得一个post div，并按照它所说的去做。

Answer 2

使用此CSS：

#changingpostinformation {
    position: fixed;
    top: 0px;
}

固定div的内容随着其他div滚过它而改变

2 个答案: