jQuery CSS 中的最小/最大绝对位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16164803/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Minimum / Maximum absolute position in CSS
提问by Lewis
What is the best approach to restricting an absolutely positioned element's position, ideally in pure CSS?
限制绝对定位元素位置的最佳方法是什么，最好是在纯 CSS 中？
I know that the following isn't possible but I guess what I'm looking for would look something like:
我知道以下是不可能的，但我想我正在寻找的东西看起来像：
.stickyElement{
bottom-max:auto;
bottom-min:0px;
top-max: auto;
top-min: 100px;
}
That would allow an element to move to a position no less than 100px from the top of it's containing, positioned element.
这将允许元素移动到距其包含的定位元素顶部不小于 100px 的位置。
An example (and my initial) use case for this is a menu that scrolls as part of a page but stops scrolling when it hits the top of a viewport. (Sticky menus?) an example of which can be seen on this page: http://spektrummedia.com/startups
一个示例（也是我最初的）用例是一个菜单，它作为页面的一部分滚动，但在到达视口顶部时停止滚动。（粘性菜单？）可以在此页面上看到的示例：http: //spektrummedia.com/startups
I fully expect that this is not possible without using some Javascript but I thought I'd put it out there.
我完全希望不使用一些 Javascript 就不可能做到这一点，但我想我会把它放在那里。
采纳答案by Matt Coughlin
position: sticky
位置：粘性
There have been discussionsin the W3C about this in recent years. One proposal is the addition of a stickyvalue for the positionproperty.
近年来，W3C一直在讨论这个问题。一项建议是sticky为该position物业增加一个价值。
.content {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
top: 10px;
}
This is currently supported in Chrome 23.0.1247.0 and later as an experimental feature. To enable it, enter about:flagsfor the URL address and press enter. Then search for "experimental WebKit features" and toggle it between enabled and disabled.
Chrome 23.0.1247.0 及更高版本目前支持此功能，作为一项实验性功能。要启用它，请输入about:flagsURL 地址并按 Enter。然后搜索“experimental WebKit features”并在启用和禁用之间切换。
On the html5rockswebsite, there's a working demo.
在html5rocks网站上，有一个工作演示。
Strictly speaking, this is an implementation of sticky content, and not a general-purpose way to limit the minimum or maximum position of an element relative to another element. However, sticky content might be the only practical application for the type of the behavior you're describing.
严格来说，这是粘性内容的一种实现，而不是限制元素相对于另一个元素的最小或最大位置的通用方法。但是，粘性内容可能是您所描述的行为类型的唯一实际应用。
回答by Philipp Hofmann
As there is no way to build this for all major browsers without the use of JavasScript I made my own solution with jQuery:
由于在不使用 JavaScript 的情况下无法为所有主要浏览器构建此功能，因此我使用 jQuery 制作了自己的解决方案：
Assign position:relativeto your sticky-top-menu. When it reaches the top of the browser window through scrolling the position is changedto positon:fixed.
分配position:relative给您的sticky-top-menu。当它通过滚动到达浏览器窗口的顶部时，位置更改为positon:fixed。
Also give your sticky-top-menutop:0to make sure that it sticks to the top of your browser window.
还要给你的sticky-top-menutop:0以确保它粘在浏览器窗口的顶部。
Here you find a working JSFiddle Example.
在这里你可以找到一个有效的JSFiddle Example。
HTML
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
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
CSS
.sticky-top-menu {
position:relative;
top: 0px;
width: 100%;
}
回答by zyghi
A media query expression that defines the distance between body 0X 0Y and browser-window 0X 0Y would allow elements to be made sticky after page is scrolled
定义 body 0X 0Y 和浏览器窗口 0X 0Y 之间距离的媒体查询表达式将允许在页面滚动后使元素具有粘性
No such expression has otherwise been proposed and is not supported by any browser, to my knowledge, but it would be a useful expression to allow dynamic configuration of sticky elements, such as menu bars that are sticky after page is scrolled past head, without use of JavaScript.
据我所知，没有提出这样的表达方式，任何浏览器都不支持这种表达方式，但它是一个有用的表达方式，允许动态配置粘性元素，例如在页面滚动到头部后粘性的菜单栏，而不使用JavaScript的。
.this element {
position: absolute;
top: 200px;
}
@media (max-scroll: 200px 0) {
.this.element {
position:fixed;
top: 0;
}
}
回答by Tanner
To my knowledge, there is no way to restrict an element that was positioned using absolute positioning using solely CSS.
据我所知，没有办法限制仅使用 CSS 使用绝对定位定位的元素。
