滚动到后，如何使div停留在屏幕顶部？

JavaScript CSS

JinJin

2020-03-23

我想创建一个div，它位于内容块的下方，但是一旦页面滚动到足以接触其顶部边界的位置，它就会固定在适当的位置并随页面滚动。

第2971篇《滚动到后，如何使div停留在屏幕顶部？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共7个回答

Tony阳光Sam 2020.03.23

不是一个确切的解决方案，而是一个不错的选择

此CSS仅在屏幕顶部滚动条。解决了所有问题与ONLY CSS，NO的JavaScript，NO JQuery的，没有大脑的工作（笑）。

享受我的小提琴：D所有代码都包含在其中:)

的CSS

#menu {
position: fixed;
height: 60px;
width: 100%;
top: 0;
left: 0;
border-top: 5px solid #a1cb2f;
background: #fff;
-moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
-webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
z-index: 999999;
}

.w {
    width: 900px;
    margin: 0 auto;
    margin-bottom: 40px;
}<br type="_moz">

把内容足够长的时间，所以你可以在这里看到效果:)呵呵，参考是有作为，因为他应该得到的事实，他的功劳

仅CSS屏幕顶部滚动条

伽罗理查德 2020.03.23

在javascript中，您可以执行以下操作：

var element = document.getElementById("myid");
element.style.position = "fixed";
element.style.top = "0%";

小小 2020.03.23

Evan提供的回答其他问题的信息可能会对您有所帮助：

滚动后检查元素是否可见

您基本上想修改元素的样式，以仅在验证document.body.scrollTop值等于或大于元素的顶部之后将其设置为固定。

古一 2020.03.23

我在寻找相同的东西时碰到了这一点。我知道这是一个老问题，但我想我会提供一个更新的答案。

Scrollorama具有“固定”功能，这正是我想要的。

http://johnpolacek.github.io/scrollorama/

Tom凯 2020.03.23

这是Josh Lee回答的扩展版本。如果您希望div位于右侧的侧边栏上，并在一定范围内浮动（即，您需要指定顶部和底部锚点位置）。当您在移动设备上查看该错误时，它还修复了一个错误（您需要检查左滚动位置，否则div将移出屏幕）。

function moveScroller() {
    var move = function() {
        var st = $(window).scrollTop();
        var sl = $(window).scrollLeft();
        var ot = $("#scroller-anchor-top").offset().top;
        var ol = $("#scroller-anchor-top").offset().left;
        var bt = $("#scroller-anchor-bottom").offset().top;
        var s = $("#scroller");
        if(st > ot) {
            if (st < bt - 280) //280px is the approx. height for the sticky div
            {
                s.css({
                    position: "fixed",
                    top: "0px",
                    left: ol-sl
                }); 
            }
            else
            {
                s.css({
                    position: "fixed",
                    top: bt-st-280,
                    left: ol-sl
                }); 
            }
        } else {
            s.css({
                position: "relative",
                top: "",
                left: ""
            });

        }
    };
    $(window).scroll(move);
    move();
}

樱 2020.03.23

自2017年1月和Chrome 56发行以来，大多数常用的浏览器都支持position: stickyCSS中的属性。

#thing_to_stick {
  position: sticky;
  top: 0px;
}

在Firefox和Chrome中帮了我大忙。

在Safari中，您仍然需要使用position: -webkit-sticky。

Polyfill可用于Internet Explorer和Edge；https://github.com/wilddeer/stickyfill似乎是一个不错的选择。

JinJin 2020.03.23

我遇到了与您相同的问题，最终制作了一个jQuery插件来解决它。它实际上解决了人们在此处列出的所有问题，并且还添加了一些可选功能。

选件

stickyPanelSettings = {
    // Use this to set the top margin of the detached panel.
    topPadding: 0,

    // This class is applied when the panel detaches.
    afterDetachCSSClass: "",

    // When set to true the space where the panel was is kept open.
    savePanelSpace: false,

    // Event fires when panel is detached
    // function(detachedPanel, panelSpacer){....}
    onDetached: null,

    // Event fires when panel is reattached
    // function(detachedPanel){....}
    onReAttached: null,

    // Set this using any valid jquery selector to 
    // set the parent of the sticky panel.
    // If set to null then the window object will be used.
    parentSelector: null
};