JavaScript to achieve fixed sidebar

Use javascript to implement a fixed sidebar, for your reference, the specific content is as follows

I am still learning the big front end. Please forgive me if there are any irregularities or incorrect ideas in the code. Thank you for your advice.

When we browse a certain mall or certain websites, we often encounter something called a sidebar, which changes with the length of our browser browsing1, thereby achieving a fixed position relative to the window1

**Code as below**

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 .cm{
 position: absolute;
 top: 300px;
 margin-left: 1150px;
 width: 60px;
 height: 130px;
 background-color: pink;
 }
 .w{
 margin: 10px auto;
 width: 80%;
 }
 .head{
 height: 200px;
 background-color: blue;
 }
 .banner{
 height: 400px;
 background-color: green;
 }
 .main{
 height: 1000px;
 background-color: hotpink;
 }
 span {
 display: none;
 /*position: absolute;
 bottom: 0;*/
 }
 </style>
</head>
<body>
 <div class="cm">
 <span class="backTop">Back to top</span>
 </div>
 <div class="head w">Head area</div>
 <div class="banner w">Banner area</div>
 <div class="main w">Main area</div>
 <script>
 var cm = document.querySelector('.cm')
 var banner = document.querySelector('.banner')
 /*console.log(banner.offsetTop)*/
 //The size and position of the curled head are written outside var bannertop=banner.offsetTop
 var cmtop=cm.offsetTop-bannertop
 var main = document.querySelector('.main')
 var goback = document.querySelector('.backTop')
 var maintop=main.offsetTop
 document.addEventListener('scroll',function () {
 //The page is rolled away /*console.log(window.pageYOffset)*/
 //When the curl header is greater than 214, the sidebar is fixed if (window.pageYOffset>bannertop){
 cm.style.position='fixed'
 cm.style.top=cmtop+'px'
 }else {
 cm.style.position='absolute'
 cm.style.top='300px'
 }
 if (window.pageYOffset>maintop){
 goback.style.display='block'
 }else {
 goback.style.display='none'
 }
 })
 </script>
</body>
</html>

Demonstration effect

Code Explanation

The document's added event scroll is used here, and the browser scroll event is used to trigger the function when scrolling.

A variable called bannerTop is set here, which is the distance between the top of the green module in the middle and the top of the page. Then the variable cmtop is defined, where cm is the distance from the sidebar to the top, cmtop=bannerTop-cm.offsetTop. Then determine whether the curled length of the page is greater than the distance from the middle module to the top, which means whether the page has been swiped to the middle module. If it has been swiped to the middle module, then fix the position of the sidebar, and then change the distance from the sidebar to the top accordingly. In this case, because the sidebar and the middle block are relatively static, the value of cmtop is constant when it is not rolled to the middle area, and when it is rolled to the middle area, banner. The value of Top becomes negative, so the value of cmtop increases accordingly, and this increased value is passed to the value of the sidebar's distance from the top. This results in the situation where the sidebar remains relatively still when it is scrolled to the middle area. If the middle area is not slid, the sidebar will remain in the default position.

Then if you swipe to the last area, the words "Back to Top" will appear on the sidebar.

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.

You may also be interested in:

How to implement the fixed effect of the blog sidebar module sliding with the scroll bar (js+jquery, etc.)
JavaScript to implement dynamic sidebar code
Detailed explanation of javascript implementation of dynamic sidebar example
Using js to write a responsive sidebar
JS implements the sidebar mouse over pop-up box + buffer effect
JavaScript to achieve a simple hidden sidebar function example
Implementing mobile sidebar sliding effects based on slideout.js
JS motion framework sharing sidebar animation example
Implement seamless scrolling in JavaScript and share to the sidebar example code
js+css to achieve full screen sidebar
JS realizes Jingdong product classification sidebar
Research on the effect of page sidebar realized by JS

<<: An example of changing traditional replication to GTID replication without stopping business in MySQL 5.7

>>: How to install phabricator using Docker