CSS Hierarchy Tips! How to automatically add head shadow while scrolling?

Welcome to WeChat public account: front-end detective

In web pages, shadows are often used to highlight hierarchical relationships, especially for top navigation, but sometimes the design feels that there is no need to show shadows at the beginning, and only appear after scrolling. For example, in the following example, pay attention to the head shadow

As you can see, the shadow appears only after scrolling. Under normal circumstances, it can be achieved by using JS to monitor the scroll event to dynamically add the class name, but after some attempts, I found that this effect can be easily achieved with only CSS, and the following is the effect

You can also visit CSS auto header shadow (runjs.work) ahead of time to see it in action. How to achieve it, take two minutes to see it~

1. Fixed positioning of the head

Suppose there is such a layout

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

Just make up

 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, which 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 for positioning, which can retain the original occupancy while absorbing the ceiling.

 header{
  position: sticky;
  top: 0
}

The effect is as follows, just without the shadow

Second, the principle of CSS implementation

Achieving this effect requires a little bit of "CSS trickery". Suppose there is a layer of shadow, which is occluded by an element by default, 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)

The hierarchical relationship is: head > occluder > shadow > content

During the scrolling process, the shadow is 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

The principle is this, let's see the specific implementation

Three, CSS specific implementation

According to the above principle, an element needs to be added here, 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 directly use fixed for positioning, or you can not set top value, because the default is located at the non-positioning position ( It also reflects the benefits of sticky ), that is, under the head

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

fixed When positioning is not set top or left value, it is still in the original position, but it will be fixed at this position

The occluder can be filled with solid color, and it needs to scroll with the content without occupying space. At the same time, in order to improve the level , you can set a absolute positioning

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

absolute When positioning is not set top or left value, it is still in the original position and will scroll with the content

Now let's take a look at the hierarchical relationship. The head, shadow, and occluder are all positioned . According to the DOM sequence, at this time

The hierarchical relationship is: occluder > shadow > head > content

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

 header{
  /**/
  z-index: 1;
}

The hierarchical relationship is: head > occluder > shadow > content

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

3. Softer shadows

In fact, the above effect is already very good, but a little bit blunt. Looking closely, the shadows have a "pushing up" feeling as they roll slowly, as follows

Is there a way to make this process a little softer? Like a change in transparency?

Of course, it is also possible, and the implementation is relatively simple. The reason why the above is relatively blunt is that the occluder is a solid color. Wouldn't it be better if it was replaced with 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 a "pushing up" effect, what do you think?

The point is here~ The following 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;
}

HTML structure is also very simple

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

You can visit the online link CSS auto header shadow (runjs.work)

RunJS , front-end code creation and sharing online.

4. Summary and Outlook

The above is all the content to share. Do you have another CSS trick? Three positioning attributes are used, almost zero cost, copy a few lines of code, and it can be used immediately. The following summarizes the key points of implementation:

1. The layout of the fixed header is recommended to be implemented with sticky . The advantage is that the header can be reserved without additional reservation.
2. The overall implementation idea is CSS blindfolding and CSS hierarchy, which block each other
3. fixed When positioning is not set top or left value, it is still in the original position, but it will be fixed at this position
4. absolute When positioning is not set top or left value, it is still in the original position and will 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, scrolling-related interactions like this can be implemented through @scroll-timeline . Those who are interested can learn about this in advance, but it is almost impossible to use in actual production (currently it is necessary to manually turn on the experimental features), you can It is expected that with the continuous development of new CSS features, such "CSS tricks and tricks" will definitely be gradually replaced by the official, and the experience will be more perfect, but it does not mean that these thoughts are useless, the actual demand is thousands of thousands Wan, it is impossible for the official to take care of them all. 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 more interesting part of CSS. Yes, if it is helpful to you, welcome to like, favorite, and forward ❤❤❤

Welcome to WeChat public account: front-end detective