y 滚动时元素的对齐方式

Question

我想要的是，当有人使用 y 滚动时，即使在这种情况下，标题（包含日期和日期应该可见。）请检查 屏幕截图

使用位置：固定和z-index等的东西

（我见过的例子：--当你打开堆栈溢出并且你的JavaScript被禁用时，那么在这种情况下会出现一条红色消息即使您向下滚动页面，也会出现并继续出现。）

所以我想做的是： -

最初在页面加载时，这一行将位于页面之间（因为上面还有很多其他内容，一旦用户滚动向下它应该对用户可见，即它粘在页面顶部）

Answer 1

如果我理解正确的话，您正在寻找一个不在页面顶部但当您向下滚动经过它时粘在顶部的元素？这可以通过 css 和一点 JavaScript 魔法（为了简洁而使用 jQuery）来完成：

/* CSS - you should add width, height, padding as needed */
#your_element { position:relative;}

如果禁用 JS，您的元素将正常运行。否则，以下代码片段将使其动态化：

win = $(window);
element = $('#your_element');

if (element.length) {                // <-- Make sure element exists
    win.scroll(function () {         // <-- When scrolling do the following
        if (win.scrollTop() > 100) { // <-- Adjust number.  Explanation to follow
            element.css({'position':'fixed', 'top':'0px'});
        } else {
            element.css({'position':'relative', 'top':'auto'});
        }
    });
}

现在您只需调整值 100 即可等于页面顶部与元素顶部之间的距离。因此，如果您的元素距顶部 250px，则应使用 250。如果你不确定，你可以尝试一下，直到你得到看起来光滑的东西。