17

限制绝对定位元素位置的最佳方法是什么，最好是在纯 CSS 中？

我知道以下是不可能的，但我想我正在寻找的东西看起来像：

.stickyElement{
   bottom-max:auto;      
   bottom-min:0px;
   top-max: auto;
   top-min: 100px;
 }

这将允许一个元素移动到距离其包含的定位元素的顶部不小于 100px 的位置。

一个示例（也是我最初的）用例是一个菜单，它作为页面的一部分滚动，但在到达视口顶部时停止滚动。（粘性菜单？）可以在此页面上看到一个示例：http: //spektrummedia.com/startups

我完全希望如果不使用一些 Javascript，这是不可能的，但我想我会把它放在那里。

4

5 回答 5

11

位置：粘性

近年来，W3C一直在讨论这个问题。一种建议是增加财产的sticky价值。position

.content {
    position: -webkit-sticky;
    position:    -moz-sticky;
    position:     -ms-sticky;
    position:      -o-sticky;
    position:         sticky;
    top: 10px;
}

Chrome 23.0.1247.0 及更高版本目前支持此功能，作为实验性功能。要启用它，about:flags请输入 URL 地址并按 Enter。然后搜索“experimental WebKit features”并在启用和禁用之间切换。

在html5rocks网站上，有一个工作演示。

严格来说，这是一种粘性内容的实现，而不是限制一个元素相对于另一个元素的最小或最大位置的通用方式。但是，粘性内容可能是您所描述的行为类型的唯一实际应用。

于 2013-04-23T15:34:21.030 回答
5

由于不使用 JavaScript 就无法为所有主要浏览器构建它，因此我使用 jQuery 制作了自己的解决方案：

分配position:relative给您的置顶菜单。当它通过滚动到达浏览器窗口的顶部时，位置将变为positon:fixed。

还要提供您的置顶菜单 top:0，以确保它贴在浏览器窗口的顶部。

在这里您可以找到一个有效的JSFiddle 示例。

HTML

<header>I'm the Header</header>
<div class="sticky-top-menu">
  <nav>
    <a href="#">Page 1</a>
    <a href="#">Page 2</a>
  </nav>
</div>
<div class="content">
  <p>Some content...</p>
</div>

jQuery

$(window).scroll(function () {
    var headerTop = $("header").offset().top + $("header").outerHeight();

    if ($(window).scrollTop() > headerTop) {
        //when the header reaches the top of the window change position to fixed
        $(".sticky-top-menu").css("position", "fixed");
    } else {
        //put position back to relative
        $(".sticky-top-menu").css("position", "relative");
    }
});

CSS

.sticky-top-menu {
    position:relative;
    top: 0px;
    width: 100%;
}
于 2013-04-24T07:56:35.317 回答
3

定义正文 0X 0Y 和浏览器窗口 0X 0Y 之间距离的媒体查询表达式将允许元素在页面滚动后变得粘滞

据我所知，没有提出过这样的表达式，并且任何浏览器都不支持，但它是一个有用的表达式，可以动态配置粘性元素，例如在页面滚动到头部后粘性的菜单栏，而不使用JavaScript 的。

.this element {
  position: absolute;
  top: 200px;
}

@media (max-scroll: 200px 0) {
  .this.element {
    position:fixed;
    top: 0;
  }
}
于 2014-03-15T21:23:12.330 回答
1

据我所知，没有办法限制使用绝对定位仅使用 CSS 定位的元素。

于 2013-04-23T14:09:16.960 回答
0

我知道这篇文章很旧，我可能有点晚了，但是对于仍然想知道如何做到这一点的人，我建议检查clamp()CSS 中的方法，你可以这样做：

top: clamp(30px, 10vw, 50px);

这会将最小值设置为 30px，理想值设置为 10vw，最大值设置为 50px。

于 2021-11-04T20:52:00.497 回答