Use Smart CSS to apply styles based on the user's scroll position
|
By adding the current scroll offset to the attributes of the html element, we can style elements on the page based on the current scroll position. We can use this to build a navigation component that floats on top of the page. This is the HTML we will use. The <header> component is the one we want to always float at the top of the page as we scroll down. <header>I'm the page header</header> <p>Lot's of content here...</p> <p>More beautiful content...</p> <p>Content...</p> First, we'll listen for the 'scroll' event on the document, and every time the user scrolls we'll get the current scrollY value.
document.addEventListener('scroll', () => {
document.documentElement.dataset.scroll = window.scrollY;
});
We store the scroll position in the data attribute of the html element. If you look at the DOM using the dev tools it will look like this: <html data-scroll="0">
/* Ensure that the header tag is always higher than 3em */
header {
min-height: 3em;
width: 100%;
background-color: #fff;
}
/* Keep the same height as the header's min-height at the top of the page */
html:not([data-scroll='0']) body {
padding-top: 3em;
}
/* Switch the header tag to fixed positioning mode and fix it to the top of the page*/
html:not([data-scroll='0']) header {
position: fixed;
top: 0;
z-index: 1;
/* The box-shadow property can enhance the floating effect*/
box-shadow: 0 0 .5em rgba(0, 0, 0, .5);
}
That’s basically it, when the user scrolls down, the header tag will automatically detach from the page and float above the content. The JavaScript code doesn't care about this, its job is to put the scroll offset in the data attribute. This is perfect because there is no tight coupling between JavaScript and CSS. But there are still some areas that can be improved, mainly in terms of performance. First, we have to modify the JavaScript script to accommodate the situation where the scroll position is not at the top when the page loads. In such cases, the header tag will be rendered incorrectly. When the page loads, we must quickly get the current scroll offset, which ensures that we are always in sync with the current state of the page.
// Read the scroll position of the current page and store it in the document's data property // so we can use it in our stylesheet const storeScroll = () => {
document.documentElement.dataset.scroll = window.scrollY;
}
// Listen for scroll events document.addEventListener('scroll', storeScroll);
// Update the scroll position when the page is opened for the first time storeScroll();
Next we'll look at some performance improvements. If we want to get the scrollY position, the browser will have to calculate the position of every element on the page to make sure it returns the correct position. It would be best if we didn't force it to take a value every time it scrolls. To do this, we need a debounce method, which will queue our fetch requests until the browser is ready to draw the next frame. At this point, it has already calculated the positions of all the elements on the page, so it doesn't keep doing the same work over and over again.
// The debounce function accepts a custom function as a parameter const debounce = (fn) => {
// This contains a reference to requestAnimationFrame so we can stop it whenever we want let frame;
// The debounce function will return a new function that can accept multiple parameters return (...params) => {
// If the value of frame exists, clear the corresponding callback if (frame) {
cancelAnimationFrame(frame);
}
// Make our callback execute when the browser refreshes the next frame frame = requestAnimationFrame(() => {
// Execute our custom function and pass our parameters fn(...params);
});
}
};
// Reads out the scroll position and stores it in the data attribute
// so we can use it in our stylesheets
const storeScroll = () => {
document.documentElement.dataset.scroll = window.scrollY;
}
// Listen for new scroll events, here we debounce our `storeScroll` function
document.addEventListener('scroll', debounce(storeScroll));
// Update scroll position for first time
storeScroll();By marking the event as passive, we can tell the browser that our scroll event will not be blocked by touch interactions (such as when interacting with plugins such as Google Maps). This allows the browser to scroll the page immediately because it now knows that the event will not be blocked.
document.addEventListener('scroll', debounce(storeScroll), { passive: true });With the performance issue fixed, we can now use JavaScript in a stable way to feed the fetched data into CSS and use it to style elements on the page. Live Demo on CodePen The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: Use js to call js functions in iframe pages
>>: Analysis of several situations where MySQL index fails
Recommend
About the startup error caused by incompatibility between vmware workstations and device/credential
vmware workstations starts the virtual machine er...
Summary of CSS3 practical methods (recommended)
1. Rounded border: CSS CodeCopy content to clipbo...
Understanding Vuex in one article
Table of contents Overview Vuex four major object...
Using the outline-offset property in CSS to implement a plus sign
Assume there is such an initial code: <!DOCTYP...
SQL group by to remove duplicates and sort by other fields
need: Merge identical items of one field and sort...
The use and difference between JavaScript pseudo-array and array
Pseudo-arrays and arrays In JavaScript, except fo...
Summary of HTML knowledge points for the front end (recommended)
1. HTML Overview htyper text markup language Hype...
Some "pitfalls" of MySQL database upgrade
For commercial databases, database upgrade is a h...
How to get the size of a Linux system directory using the du command
Anyone who has used the Linux system should know ...
How to automatically back up the mysql database regularly
We all know that data is priceless. If we don’t b...
Comprehensive website assessment solution
<br />Sometimes you may be asked questions l...
The whole process of IDEA integrating docker to deploy springboot project
Table of contents 1. IDEA downloads the docker pl...
14 techniques for high-performance websites
Original : http://developer.yahoo.com/performance...
mysqldump parameters you may not know
In the previous article, it was mentioned that th...
Realizing provincial and municipal linkage effects based on JavaScript
This article shares the specific code of JavaScri...