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

Question

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

我知道以下是不可能的,但我想我正在寻找的东西会是这样的:

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

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

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

我完全相信,如果不使用一些Javascript,这是不可能的,但我想我会把它放在那里.

Answer 1

位置:粘

近年来,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:flagsURL地址,然后按Enter键.然后搜索"实验性WebKit功能"并在启用和禁用之间切换.

在html5rocks网站上,有一个工作演示.

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

Answer 2

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

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

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

Answer 3

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

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

还要给你的sticky-top-menu 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%;
}