位置：粘性的

近年来，W3C对此进行了讨论，其中一个建议是为position属性添加一个sticky值。

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

Chrome 23.0.1247.0及更高版本目前支持此功能，作为实验性功能。要启用此功能，请在URL地址中输入about:flags，然后按Enter键。然后搜索"实验性WebKit功能"，并在启用和禁用之间切换。
在html5rocks网站上，有一个正在运行的demo。
严格地说，这是粘性内容的一种实现，而不是限制一个元素相对于另一个元素的最小或最大位置的通用方法。然而，粘性内容可能是您所描述的行为类型的唯一实际应用。

由于不使用JavasScript就无法为所有主流浏览器构建此功能，因此我使用jQuery创建了自己的解决方案：
将position:relative分配给您的置顶菜单。当它通过滚动到达浏览器窗口顶部时，位置更改为positon:fixed。
另外，请提供sticky-top-menutop: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%;
}

定义正文0X 0Y和浏览器窗口0X 0Y之间距离的媒体查询表达式将允许在滚动页面后使元素粘滞
据我所知，没有这样的表达式被提出，也没有被任何浏览器支持，但它将是一个有用的表达式，允许动态配置粘性元素，如菜单栏，在页面滚动过头部后是粘性的，而不使用JavaScript。

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

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

我知道这篇文章已经很老了，我可能有点晚了，但是对于那些还想知道如何做到这一点的人，我建议你看看CSS中的[clamp()][1]方法，你可以这样做：
top: clamp(30px, 10vw, 50px);
这会将最小顶部值设置为30px，将理想值设置为10vw，将最大值设置为50px。

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