css滚动固定到顶部_位置固定：滚动到顶部然后在纯CSS中固
定
css 滚动 固定到顶部
For a time “dynamic fixed” elements were the hot web design feature: scroll a site and everything moved as expected, but when a particular element (often a , sometimes an advertisement) reached the top of the page it would fix itself in place, while the rest of the document continued to scroll underneath it. Scroll back, and the element would reattach itself to the document.
⼀段时间以来，“动态固定”元素是Web设计的热门功能：滚动⽹站，⼀切都按预期移动，但是当特定元素(通常是 ，有时是⼴告)到达页⾯顶部时，它将⾃⾏修复。位置，⽽⽂档的其余部分继续在其下⽅滚动。 向后滚动，元素将重新附加到⽂档上。
This behaviour - a dynamic hybrid between the standard and - was often added to a page with JQuery, via one of a hundred different plugins. Like many popular features, it was eventually adopted into an official specification, meaning that the effect could be achieved with native , with no , scripts, or other dependencies… but in this case, the adoption process was (and continues to be) somewhat troubled.
这种⾏为-标准和之间的动态混合-通常是通过⼀百个不同的插件之⼀通过JQuery添加到页⾯中的。 像许多流⾏的功能⼀样，它最终被采纳为正式规范，这意味着可以使⽤本机来实现效果，⽽⽆需 ，脚本或其他依赖项……但是在这种情况下，采⽤过程是(并且⼀直是)有点⿇烦。
事情如何意味着成为 (How Things Were Meant to Be)
The behavior was codified as a new CSS value: position: sticky. This, combined with a clever use of top (in the context of sticky, the distance from the top of the body at which the element will “stick” when scrolled; alternatives are left, bottom and right for scrolling in those directions) was intended to cover the range of popular use cases. The syntax, then, should be pretty simple:
该⾏为被编码为新CSS值： position: sticky 。 这是与top的巧妙⽤法结合使⽤的(在sticky的情况下，是指元素从body顶部到滚动时将在其顶部“粘住”的距离；在这些⽅向上滚动的⽅式分别是left ， bottom和right )涵盖了流⾏⽤例的范围。 然后，语法应该⾮常简单：
#stickytest {
position: sticky;
top: 0px;
}
Applied to something like an , the markup would be:
应⽤于之类的标记将是：
<img src="geckofoot.jpg" alt id="stickytest">
<p>Lorem ipsum…
Of course, this assumes that the page has enough content below the element to bring #stickytest to the top of the browser window: if it doesn’t, the element will never reach its target, and therefore never “stick”. to achieve this is recommended for testing purposes.
当然，这假定页⾯在元素下⽅具有⾜够的内容，以将#stickytest带到浏览器窗⼝的顶部：如果没有，元素将永远不会到达其⽬标，因此也不会“粘住”。 建议出于测试⽬的， 以实现此⽬的。
If you test that code on a page with appropriate markup and content in a recent version of Firefox or Chrome 56+, it will work just fine. Moving to other browsers reveals “sticky’s” awkward position:
如果您在最新版本的Firefox或Chrome 56+中使⽤适当的标记和内容在页⾯上测试该代码，则可以正常⼯作。 转向其他浏览器会发现“粘性”的尴尬位置：
1. Safari 6.1+ (on both desktop and mobile) support sticky with a . Somewhat unusually, the prefix is applied to the value,
not the property, since it’s the former that’s new.
Safari 6.1+(在台式机和移动设备上)均⽀持带有 sticky 。 有点不寻常的是，前缀是应⽤于value ，⽽不是property ，因为前者是新的。
2. There’s an added catch: in Safari sticky only works with elements that are display: block, so the CSS for this sticky
image example becomes:
有⼀个附加的注意事项：在Safari sticky仅适⽤于display: block元素，因此此粘性图像⽰例CSS变为：
#stickytest {
display: block;
position: -webkit-sticky;
position: sticky;
top: 0px;
}
In addition:
此外：
Placing the sticky element inside a parent that has overflow: hidden applied to it will cause the sticky behaviour to fail.
将sticky元素放在发⽣overflow: hidden的⽗对象中overflow: hidden会导致sticky⾏为失败。
Officially, sticky should also work with display: table, including table cells, as it’s very useful for navigating long rows of table data while keeping column headers in view. Unfortunately, browser implementation of this feature has been lacking so far.
正式地， sticky还应该与display: table ，包括table单元格，因为它对于导航较长的表数据⾏同时使列标题保持可见⾮常有⽤。 不幸的是，到⽬前为⽌，浏览器尚未实现此功能。
ChromeTra (Chrome Travails)
You’ll probably find web pages that insist Chrome has support for position: sticky as an experimental option, and that was true… until the option was removed entirely in Chrome 37. The Google development team felt that keeping position: sticky was too much of a challenge in their quest to improve composition and rendering speed in the browser, which was achieved in Chrome 56, when position: sticky was returned to support in the browser.
您可能会发现坚持Chrome⽀持position: sticky⽹页position: sticky作为实验性选项，这是真的……直到该选项在Chrome 37中被完全删除。 Google开发团队认为保持position: sticky对于提⾼浏览器的合成和渲染速度是⼀项艰巨的挑战，这是在Chrome 56中实现的，当
时position: sticky被返回到浏览器⽀持。
Fortunately, there are a number of options for this: the , along with many others; my personal favorite is Oleg Korsunsky’s , which has the option of working with or without JQuery.
幸运的是，有很多选择可以实现： ，还有许多其他 ； 我个⼈最喜欢的是Oleg Korsunsky的 ，可以选择是否使⽤JQuery。
The example on the StickyFill page adds the sticky behaviour as a class, but it’s more likely to affect only one element, making an a more logical selector. In the case of this demo, after inserting the script at the bottom of the page, I’d add:
StickyFill页⾯上的⽰例将粘性⾏为添加为⼀个类，但它更可能只影响⼀个元素，从⽽使成为更具逻辑性的选择器。 对于此演⽰，在页⾯底部插⼊脚本后，我将添加：
Stickyfill.ElementById('stickytest'));
Note that top, left, bottom and right for the element is measured from the body. This will include any margin already in place on the body element.
请注意，该元素的top ， left ， bottom和right是从body测量的。 这将包括在body元素上已经存在的任何边距。
把事情简单化 (Keep It Simple)
As with all new features, position: sticky has the potential for misuse. To avoid UI disasters, I would recommend the following:
与所有新功能⼀样， position: sticky可能会导致滥⽤。 为了避免UI灾难，我建议以下内容：
In theory, position: sticky can be used to fix elements inside any scrolling container, as shown in the example at the top of this page. Please don’t use sticky more than once per page: we don’t need multiple content boxes acting like clogged drains. (In addition, all the polyfills available for position: fixed fail in providing this feature; the demo for this page only works because it is inside an ).
从理论上讲， position: sticky可⽤于将元素固定在任何滚动容器内，如本页顶部的⽰例所⽰。 请不要在每页上使⽤粘稠的粘纸多于⼀次：我们不需要多个内容盒，它们就像堵塞的排⽔管⼀样。 (此外，所有可⽤于position: fixed的polyfills position: fixed⽆法提供此功能；此页⾯的演⽰仅在有效，因为它可以使⽤)。
Be very careful using position: sticky at : anything that is stuck immediately takes up screen real estate, reducing the room for your content. Make sure you’re making an element sticky because it’s required or extremely helpful to do so, not because it “looks cool”. Remember that it’s easy for users to flick-scroll to the top or bottom of most pages;
don’t get in the way of that behaviour.
使⽤position: sticky要格外⼩⼼position: sticky在 position: sticky ：任何卡住的东西都会⽴即占⽤屏幕空间，从⽽减少了容纳内容的空间。 确保您使元素发sticky是因为这样做是必需的或⾮常有帮助的 ，⽽不是因为它“看起来很酷”。 请记住，⽤户可以轻松滚动⾄⼤多数页⾯的顶部或底部。 不要妨碍这种⾏为。
To provide a reasonable use of sticky elements, write a that counters position: sticky at smaller screen sizes:
为了提供⼀个合理使⽤的sticky元件，写⼀个该计数器position: sticky在⼩屏幕尺⼨：
@media all and (max-width: 600px) {
#stickytest {
position: static !important;
}css最新
}
This returns the element to normal flow in the document if the viewport is 600 pixels wide or less. You’ll need to write a similar rule in JavaScript with if you’re using a polyfill. Re-writing and adding to the script above:
如果视⼝的宽度为600像素或更⼩，这将使元素返回到⽂档中的正常流。 如果您使⽤的是则需要使⽤在JavaScript中编写类似的规则。 重写并添加到上⾯的脚本中：
var sticky = ElementById('stickytest');
var screencheck = window.matchMedia("(max-width: 600px)");
Stickyfill.add(sticky);
if (screencheck.matches) {
}
As a rule, “stuck” elements should be the new cutting-off point for content. Don’t “stick” an element in
the middle of a block, as having scrolling text appear both above and below a fixed element is very distracting, and makes the text difficult to read.
通常， “卡住”元素应该是内容的新起点 。 不要在⼀个块的中间“粘贴”⼀个元素，因为在固定元素的上⽅和下⽅都显⽰滚动⽂本会分散注意⼒，并且使⽂本难以阅读。
Similarly, try to avoid sticking elements that cut off part of a text block, forcing the user to scroll in a decreased amount of space to read a full line.
同样，请尝试避免粘贴会截断部分⽂本块的元素，从⽽迫使⽤户在减少的空间中滚动以读取整⾏。
Ensure that the fixed element does not occupy more than the minimum expected height of the viewport. If it is taller than its container when it is “stuck”, users will never be able to see all of its content; nor are they likely to be able to read any of the other content on the page.
确保固定元素所占的空间不超过视⼝的最⼩预期⾼度 。 如果它在被“卡住”时⽐其容器⾼，则⽤户将永远⽆法看到其所有内容。 他们也可能⽆法阅读页⾯上的任何其他内容。
Further to this, you might want to indicate that content is truly disappearing under the stuck element: a partial
transparency effect when the element is in it’s “stuck” position, such as my , can provide a useful visual cue.
除此之外，您可能希望指⽰内容在粘贴元素下确实消失了 ：当元素处于“粘贴”位置时，部分透明效果(例如我的 )可以提供有⽤的视觉提⽰。
In principle, as series of elements could be provided with the same position: sticky value, effectively replacing each other at the chosen point on the screen as the page scrolls. While this can be effective, it’s also potentially very confusing to users, and should be employed carefully.
原则上，可以为⼀系列元素提供相同的position: sticky值，在页⾯滚动时在屏幕上的选定点有效地相互替换。 尽管这可能很有效，但也可能使⽤户感到困惑，因此应谨慎使⽤。
Unfortunately there’s no “stuck” event in JavaScript yet to report when an element has entered its fixed position; right now, you have to test for that independently. (Some polyfills add a class to stuck elements to make up for this lack).
不幸的是，当元素进⼊其固定位置时，JavaScript中还没有“粘滞”事件需要报告。 现在，您必须对此进⾏独⽴测试。 (某些polyfill
将class添加到粘贴的元素中，以弥补这种不⾜)。
css 滚动 固定到顶部

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。