滚动条滚动后导航栏出现_滚动模糊的网站导航栏

最新推荐文章于 2022-12-08 14:38:41 发布

cungui5726

最新推荐文章于 2022-12-08 14:38:41 发布

阅读量281

点赞数 1

文章标签：过滤器 css html javascript css3 ViewUI

原文链接：https://thenewcode.com/990/Scroll-Behind-Blurred-Site-Navigation-Bar

版权

滚动条滚动后导航栏出现

Another popular interface pattern, one that gained particular ascendancy after the release of iOS 7, is a “frosted” navigation bar that blurs page content scrolled behind it. It might appear that a CSS blur filter would be the easy and obvious way to achieve this on a web site, and it is, except for one vexing limitation: a standard CSS filter affects only content inside the element, not behind it. There is, as yet, no CSS effect would achieve a blur for elements underneath it, with the exception of the just-released -webkit-backdrop-filter, an experimental property that is only available in Safari 9. However, there is a solution:

另一种流行的界面模式是“磨砂”导航栏，它模糊了滚动在其后面的页面内容，该界面模式在iOS 7发布后获得了特别的重视。看起来CSS模糊过滤器可能是在网站上实现此目的的简单而明显的方法，而且它有一个令人烦恼的局限性：标准CSS过滤器仅影响元素内部的内容，而不影响元素背后的内容。到目前为止，尚无CSS效果可以模糊其下的元素，只是刚刚发布的-webkit-backdrop-filter这个实验性属性(仅在Safari 9中可用)除外。但是，有一种解决方案：

制作酒吧 (Making The Bar)

For this version, the bar itself is an empty element with a fixed position. The navigation goes on top of this element, using the same dimensions. Written in Sass, it could be expressed as the following, sans vendor prefixes:

对于此版本，条形图本身是具有fixed位置的空元素。导航使用相同的尺寸在此元素的顶部。用Sass编写，可以用以下形式表示，但不带供应商前缀：

#blurrycontent {
	padding: 1rem;
	top: 0; left: 0;
	width: 100%;
	height: 5rem;
	overflow: hidden;
	position: fixed;
	filter: blur(4px);
}
nav {
	@extend #blurrycontent;
	filter: none;
	text-align: right;
}

翻页 (Turning The Page)

The remaining content of the page goes inside a <main> element, not within the <body>, for reasons that will become clear in a moment:

页面的其余内容位于<main>元素内，而不位于<body> ，原因很快就会变得很清楚：

<main id="content">
	<h1>London</h1>
	<p>With roots at least 7,000 years old, London is an accretion of artifacts old and new, from the remnants of wooden Neolithic settlements buried in the mud of the Thames to gleaming 21st century spires of glass and steel…
</main>

With the #blurrycontent and <nav> elements placed on top of each other in a fixed location at the top of the screen, the <main> element is styled to take the rest of the content:

将#blurrycontent和<nav>元素在屏幕顶部的固定位置上放置在一起，将<main>元素设置为采用其余内容的样式：

main {
	margin: 0;
	background: url(london_background.jpg);
	background-size: cover;
	padding: 2rem;
}

This works as far as it goes, but there’s no visible effect in the navigation area as the document scrolls upward. We’re about to change that.

此功能尽其所能，但是当文档向上滚动时，在导航区域中没有可见的效果。我们将改变这种状况。

透过玻璃，黑暗地 (Through a Glass, Darkly)

As I said at the start , filter only works for objects inside an element, not underneath it. So we’re going to take a copy of <main> and place it inside #blurrycontent using the very handy cloneNode method, via a script added to the bottom of the page:

正如我在开始时所说的， filter仅适用于元素内部的对象，而不适用于元素下方的对象。因此，我们将复制<main>的副本，并通过添加到页面底部的脚本，使用非常方便的cloneNode方法将其放置在#blurrycontent ：

var pageContent = document.getElementById("content"),
pagecopy = pageContent.cloneNode(true),
blurryContent = document.getElementById("blurrycontent");
blurryContent.appendChild(pagecopy);

The effect will likely be barely visible at this stage, limited by the fact that the content in #blurrycontent doesn’t scroll with the rest of the document. Let’s synchronize the motion of the two by adding a line to the script:

由于#blurrycontent中的内容不会随文档的其余部分滚动，因此该效果在此阶段可能几乎看不到。让我们通过在脚本中添加一行来同步两者的运动：

window.onscroll = function() { 
        blurryContent.scrollTop = window.pageYOffset;
}

Now the two are linked: scroll the page, and the matching content in #blurrycontent moves at the same pace, made out-of-focus by the CSS filter. Because the <nav> element is in a fixed position on top of #blurrycontent, it remains unaffected.

现在，这两个链接在一起了：滚动页面，并且#blurrycontent的匹配内容以相同的速度移动，这由CSS过滤器引起的。由于<nav>元素位于#blurrycontent顶部的固定位置，因此不受影响。

城市界限 (City Limits)

Obviously, taking a copy of a page’s main content and feeding it through a blur filter can tax both the browser and GPU, so you’ll want to be careful just how much content exists inside the <main> element before you copy it. cloneNode is a “live” copy method: any changes made to the original in the browser will be reflected in the blurred copy, although you may see a small delay as the two synchronize.

显然，获取页面主要内容的副本并通过模糊过滤器对其进行馈送可能会给浏览器和GPU造成负担，因此在复制<main>元素之前，您需要注意其中存在多少内容。 cloneNode是一种“实时”复制方法：对浏览器中原始文件所做的任何更改都将反映在模糊的副本中，尽管在两者同步时可能会看到很小的延迟。

There are four final points to note:

最后有四点需要注意：

Because Internet Explorer doesn’t yet support CSS filters (and has abandoned its old proprietary version from older copies of IE) this won’t work in IE. The content will still scroll fine; you must won’t see any changes in the nav bar.
由于Internet Explorer尚不支持CSS筛选器 (并且已从IE的较旧版本中放弃了其旧的专有版本)，因此在IE中将无法使用。内容仍然可以正常滚动；您一定不会在导航栏中看到任何更改。
You should be careful using fixed positioning on web pages in phones and tablets: until very recently, mobile browsers were notoriously bad at position: fixed, and locking off an area of an already small screen with your site navigation is pushy, at best. While the look may be derived from a mobile OS, it’s probably best to turn off the effect at small screen sizes, using a combination of media queries and matchMedia. (Alternatively, if you’re taking a mobile-first approach, don’t turn the effect on until the screen reaches a certain breakpoint.)
您应该谨慎地在手机和平板电脑的网页上使用固定位置：直到最近，移动浏览器的position: fixed仍然非常糟糕position: fixed ，充其量只能通过站点导航锁定已经很小的屏幕区域。尽管外观可能来自移动操作系统，但最好结合媒体查询和matchMedia在小屏幕尺寸下关闭效果。 (或者，如果你正在服用的移动先行的做法，不转的效果，直到屏幕达到一定的断点。)
Accessibility should be carefully considered: screen readers interpret the DOM, not what you can see on the page, meaning that they will receive two copies of the page content by default. To avoid this, I’ve set an ARIA role on the #blurrycontent container:
应仔细考虑可访问性：屏幕阅读器解释的是DOM ， 而不是您在页面上看到的内容，这意味着默认情况下，他们将收到页面内容的两个副本。为了避免这种情况，我在#blurrycontent容器上设置了ARIA角色：
```
<div id="blurrycontent" aria-hidden="true"></div>
```
As a result, screen readers will see only the original content of the page, not the cloned copy.
结果，屏幕阅读器将仅看到页面的原始内容，而不是克隆的副本。
One should be careful in cloning elements with id attributes, as duplicated id values can lead to confusion and corruption in CSS and JavaScript. It works in this instance, but it is not a best practice.
克隆具有id属性的元素时应格外小心，因为重复的id值可能导致CSS和JavaScript混乱和损坏。它在这种情况下有效，但这不是最佳实践。

翻译自: https://thenewcode.com/990/Scroll-Behind-Blurred-Site-Navigation-Bar

滚动条滚动后导航栏出现

cungui5726

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
滚动条滚动后导航栏出现_滚动模糊的网站导航栏

滚动条滚动后导航栏出现Another popular interface pattern, one that gained particular ascendancy after the release of iOS 7, is a “frosted” navigation bar that blurs page content scrolled behind it. It might app...
复制链接

扫一扫