CSS | How to achieve the effect of monitoring page scrolling?

In web pages, shadows are often used to highlight the hierarchical relationship, especially the top navigation, but sometimes the design feels that it is unnecessary to display the shadow at the beginning, and it only appears after scrolling. For example, in the following example, pay attention to the head shadow

As you can see, the shadow only appears after scrolling. Under normal circumstances, it can be achieved by using JS to listen to scrolling events and dynamically add class names. However, after some attempts, it is found that this effect can be easily achieved only by using CSS. The following is the realization effect.

1. Head fixed positioning

Suppose there is a layout like this

<header>LOGO</header>
<main>很多内容文本</main>

Simply modify it

header {
    
    
    background: #fff;
    font-size: 20px;
    padding: 10px;
}

There are many ways to fix the head, the more common one is to use fixed positioning

header {
    
    
    position: fixed;
    top: 0;
}

However, fixed positioning does not take up space and will cause the content area to be blocked, so it is generally necessary to reserve a part of the head space, such as this

main {
    
    
	margin-top: 头部的高度
}

Here, I recommend using sticky positioning, which can retain the original space while absorbing the ceiling

header {
    
    
	position: sticky;
	top: 0
}

The effect is as follows, except there is no shadow

2. CSS implementation principle

Achieving this effect requires a little bit of "CSS trickery". Assuming that there is a layer of shadow, by default, it is blocked by an element, which is called "occluder" below. Here we need to consider the hierarchical relationship of each part, which is a little complicated, as shown below (side hierarchical relationship diagram)

层级关系为：头部 > 遮挡物 > 阴影 > 内容

During the scrolling process, the shadow will be automatically visible, and the occluder will be covered by the head again. Note that the occluder and the content are scrolled together. The dynamic demonstration is as follows

This is the principle. Let’s look at the specific implementation below.

3. CSS specific implementation

According to the above principles, an element needs to be added here, and both shadows and occluders can be generated with pseudo-elements

<header>LOGO</header>
<shadow></shadow>
<main>很多内容文本</main>

The position of the shadow here is fixed and does not need to occupy space, so you can use fixed positioning directly, or you can not set the top value, because the default position is at the non-positioning position (which also reflects the benefits of sticky), that is, the head Below.

shadow::before {
    
    
    content: '';
    box-shadow: 0 0 10px 1px #333;
    position: fixed; /* 无需top值 */
    width: 100%;
}

fixed 定位在不设置top或者left值时，仍然位于原先位置，但是会在这个位置固定下来

The occluder can be filled with a solid color, and it needs to scroll with the content without occupying space. In order to improve the level, an absolute positioning can be set.

shadow::before {
    
    
    content: '';
    width: 100%;
    height: 15px;
    background: #fff;
    position: absolute; /*无需top值*/
}

absolute定位在不设置top或者left值时，仍然位于原先位置，也会跟随内容滚动。

Now let's look at the hierarchical relationship again. The head, shadow, and occluder are all positioned. According to the order of dom, at this time

层级关系为：遮挡物 > 阴影 > 头部 > 内容

The head should be the highest, so you need to change the level separately

header {
    
    
	z-index: 1;
}

层级关系为：头部 > 遮挡物 > 阴影 > 内容

In this way, the effect shown at the beginning of the article is achieved, and the effect is as follows:

4. Softer Shadows

In fact, the above effect is already very good, but a little bit blunt. Observe carefully, in the process of scrolling slowly, the shadow has a feeling of "pushing up", as follows

Is there a way to make this process a little softer? Such as changes in transparency?

Of course it is possible, and the implementation is relatively simple. The above is relatively blunt because the occluder is a solid color. Wouldn’t it be better to change it to a translucent gradient?

shadow::after {
    
    
    height: 30px;
    background: linear-gradient(to bottom, #fff 50% , transparent);
}

The effect is as follows

So the effect of the shadow appearing is no longer "pushing up". What do you think?

Here comes the point~

Below is the complete CSS code (less than 20 lines)

header{
    
    
  position: sticky;
  background: #fff;
  top: 0;
  font-size: 20px;
  padding: 10px;
  z-index: 1;
}
shadow::before{
    
    
  content: '';
  box-shadow: 0 0 10px 1px #333;
  position: fixed;
  width: 100%;
}
shadow::after{
    
    
  content: '';
  width: 100%;
  height: 30px;
  background: linear-gradient(to bottom, #fff 50% , transparent);
  position: absolute;
}

The HTML structure is also very simple

<header>LOGO</header>
<shadow></shadow>
<!-- <main>很多内容文本</main> -->
<main>
    <p>痛！</p>
    <p>好痛！</p>
    <p>头好痛！</p>
    <p>光怪陆离满是低语的梦境迅速支离破碎，熟睡中的周明瑞只觉得脑袋抽痛异常，仿佛被人用棒子狠狠沦了一下，不，更像是遭尖锐的物品刺入太阳穴并伴随有搅动！</p>
    <p>嘶......迷迷糊糊间，周明瑞想要翻身，想要捂头，想要坐起，可完全无法挪动双脚，身体似乎失去了控制。</p>
</main>

5. Summary and Outlook

That’s all the content shared above. Have you mastered another CSS trick? Three positioning attributes are used at almost zero cost. Just copy a few lines of code and you can use it immediately. Here is a summary of the key points of implementation:

1. It is recommended to use sticky to implement the fixed head layout. The advantage is that the head space can be reserved without additional reservation.
2. The overall implementation idea is that CSS blindness and CSS levels block each other.
3. Fixed positioning will still be at the original position when the top or left value is not set, but it will be fixed at this position.
4. When absolute positioning does not set the top or left value, it will still be at the original position and will also scroll with the content.
5. Solid color occlusion is a bit stiff when scrolling, and translucent gradient occlusion is softer when scrolling.

In the future, this kind of scrolling-related interaction can be realized through @scroll-timeline, and those who are interested can learn about this aspect in advance, but it is almost impossible for actual production and use now (currently, the experimental feature needs to be manually enabled), and it is impossible for the official Once you take care of it, even if there is a plan and a draft, it may be many years later, so you must not stop thinking and imagining when learning CSS. This is probably the most interesting part of CSS.

This article mainly comes from Front-end Detective, a particularly excellent creator, and I would like to express my special thanks to him.

e to achieve, those who are interested can learn about this aspect in advance, but now it is almost impossible for actual production and use (currently need to manually enable experimental features), the official can not take care of them one by one, even if there is a plan, there is a draft, it may be many years later , so don’t stop thinking and imagining when learning CSS. This is probably the most interesting part of CSS.

This article mainly comes from Front-end Detective, a particularly excellent creator, and I would like to express my special thanks to him.