如何使div在滚动到div之后保持不变?我有一个div,它在页面后面,你需要滚动才能转到那个div.

如果我使用:

.divname {
  position: fixed;
}

div将在正常显示之前出现.也许我需要的一个很好的例子是9gag号的第二个广告.如果您的屏幕分辨率足够低,加载首页后您将看不到该广告,但是向下滚动后,您将看到第二个广告,并且在您向下滚动时它将保持不变.

推荐答案

这现在只适用于CSS,请参见https://stackoverflow.com/a/53832799/1482443


如果有人需要jQuery方法,下面是8年前发布的原始答案:

我知道这只是带标签的html/css,但是你不能只用css来做这件事.最简单的方法是使用一些jQuery.

var fixmeTop = $('.fixme').offset().top;       // get initial position of the element

$(window).scroll(function() {                  // assign scroll event listener

    var currentScroll = $(window).scrollTop(); // get current position

    if (currentScroll >= fixmeTop) {           // apply position: fixed if you
        $('.fixme').css({                      // scroll to that element or below it
            position: 'fixed',
            top: '0',
            left: '0'
        });
    } else {                                   // apply position: static
        $('.fixme').css({                      // if you scroll above it
            position: 'static'
        });
    }

});

http://jsfiddle.net/5n5MA/2/

Css相关问答推荐

如何提高数学输出的质量?

容器内的中心固定元件

为什么我的容器的弹性包裹会导致我的自动填充网格添加额外的空轨道行?

指定from_max和to_min值时隐藏Shiny sliderTextInput下的行

媒体查询在生产中没有响应:React 18 应用程序

如何让 v-col 变成可滚动的?

如何更改 JqGrid 中的pager 背景 colored颜色 ?

使用框架时样式冲突导致的 CSS 网格布局问题

为什么每次加载新页面时我的 React 侧边栏都会抖动?

图像占用尽可能多的空间但保持宽高比并包含在窗口高度中

CSS Stepper - LI After Overlaying LI Before

我怎样才能让这个边框出现在按钮元素的上方?

你能用 JavaScript 控制 GIF 动画吗?

CSS中的旋转地球

twitter-bootstrap:当鼠标悬停在 -tag 中的 btn-group 上时,如何go 掉带下划线的按​​钮文本?

如何强制显示垂直滚动条?

如何在 Firefox 和 Opera 中zoom HTML 元素?

CSS - 使 div 水平对齐

将 Fixed div 设置为父容器的 100% 宽度

background-position-x (background-position-y) 是标准的 W3C CSS 属性吗?