1. Problem#
In CSS, using animation properties conflicts with the fixed property under the same tag, causing the positioning to fail. So how do we solve this?
2. Analysis#
Let me briefly explain the background of the problem. Last night, I wanted to add a simple animation to my blog page, where the content gradually appears from the bottom to the top when the browser is refreshed. The code is as follows:
/* index-container is the main section of the page */
.index-container {
opacity: 0;
animation-name: index;
animation-duration: 0.7s;
animation-fill-mode: forwards;
}
/* A simple animation implementation */
@keyframes index {
0% {
transform: translateY(100px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
After running it, I found that the animation displayed well, but when I was browsing the article details, I noticed that the fixed positioning of the table of contents was not working.
According to the original settings, when the page is scrolled down, the table of contents should stick to the top of the browser, making it convenient to jump and view the contents. But now it can no longer stick. Checking the browser settings, the property is indeed effective, but the page is not displaying the desired result.
Previously, when I wrote the fixed positioning event for the table of contents, I used the scroll event, and then yesterday when I wrote the animation, I bound it to the onload event. I initially suspected that there was a conflict between the two windows, causing the second one to fail. So I tried a different approach, using addEventListener to listen for their execution. However, no matter how I wrote it, the fixed positioning of the table of contents still didn't work.
I stayed up too late last night, so I left it there and didn't bother with it. This morning, I went to Zhang Xinxu's website and found that there was indeed such a problem.
Reference article: https://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/
But the article only explains the cause of the problem and does not provide a clear solution.
3. Solution#
Although there is no explicit solution, it gave me an idea. Because some properties in the animation, such as scale and translate, will cause the container's width and height to be recalculated, while the fixed property relies on a specified pixel value. So when the animation is executed, the height of the page changes, and the fixed property cannot perform its task properly.
Now that we have identified the reason, the solution naturally comes to mind. Take a look at the diagram (the diagram is ugly, hand-drawn, just understand the meaning):
This was my initial layout. I bound the animation to the container of the "red box," and the table of contents was inside the red box, so it failed.
Now I will rearrange it:
The table of contents is still on the side, but I separated it from the usual sidebar into two containers. Now I bind the animation to the "main section" and the "sidebar," so the table of contents is separated from the tag with the animation.
After testing on the page, I found no issues. The animation effect and the fixed positioning of the table of contents do not interfere with each other.
I'm happy again and can happily tinker with it!