Question

限制绝对定位元素位置的最佳方法是什么，理想情况下是纯CSS？

我知道以下情况不可能，但我想我想要的东西会是这样的：

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

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

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

我完全相信如果不使用一些Javascript就不可能这样做，但我想我会把它放在那里。

Answer 1

位置：粘性

近年来W3C中有discussions这个问题。一项建议是为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键。然后搜索“实验性WebKit功能”并在启用和禁用之间切换。

在html5rocks网站上，有一个有效的demo。

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

Answer 2

由于在没有使用JavasScript的情况下无法为所有主流浏览器构建这个，我使用jQuery创建了自己的解决方案：

将position:relative分配到 sticky-top-menu 。当它通过滚动到达浏览器窗口顶部时，位置已更改为positon:fixed。

同时提供粘贴顶级菜单 top:0，以确保它贴在浏览器窗口的顶部。

在这里，您可以找到有效的JSFiddle Example。

<强> 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%;
}

Answer 3

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

Answer 4

定义主体0X 0Y和浏览器窗口0X 0Y之间距离的媒体查询表达式允许在滚动页面后使元素变为粘性

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

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

@media (max-scroll: 200px 0) {
  .this.element {
    position:fixed;
    top: 0;
  }
}

Answer 5

我想您可以研究一下min（）CSS函数：

https://developer.mozilla.org/en-US/docs/Web/CSS/min

CSS中的最小/最大绝对位置

5 个答案:

位置：粘性