JS to achieve the effect of multiple titles

Time:2020-9-28

There may be some differences between PC terminal and mobile terminal for the ceiling effect of navigation. On the PC side, we usually only need a top navigation; on the mobile end, when sliding the page, we need to have multiple titles (for example, we need to top the provinces for the selection of regions).

The difference between a single title and multiple titles is that a height range should be determined for multiple titles, in which only one title can be used, and the others are fixed effects.

1、 Page layout and style

Here, in order to test the effect, we use several repeated section tags, and we write the layout and style according to the actual needs.

<body>
 <ul>
 <h1>Achieve multiple titles of the top</h1>
 <section>
  <div>header1</div>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
 </section>
 
 <! -- set multiple sub lists such as header1, and the window can be scrolled, which is omitted here -- >
 
 <section>
  <div>header5</div>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
 </section>
 
 </ul>
</body>

<style type="text/css">
 * {
 padding: 0;
 margin: 0;
 }
 ul {
 width: 100%;
 }
 li {
 width: 200px;
 color: white;
 margin: 10px;
 list-style: none;
 border-radius: 5px;
 border: 1px solid #191970;
 background: #4169E1;
 text-align: center;
 }
 div {
 width: 100%;
 height: 30px;
 color: white;
 padding-left: 20px;
 background: #DC143C;
 }
 .box1 {
 position: fixed;
 top: 0;
 }
</style>

2、 The compilation of JS

1. Get all the titles that need a ceiling effect. It is better to use the same layout and style for the title here, so that it can be obtained more quickly and uniformly.

var box =  document.getElementsByClassName ('box '), // get all the titles that need ceiling effect
  section =  document.getElementsByTagName ('section '); // get all sub lists, which are useful later

2. Get the number of titles and define an array to store the distance (offsettop) between each title and its parent element.

Var ot = [], // stores the offsettop of each title
  len =  box.length ; // number of titles

3. Traverse all the titles, get offsettop, and store it in the OT array.

for(let i=0; i<len; i++) {
 ot.push (box [i]. Offsettop); // get the offsettop of each title
}

4. Listen to the window’s scroll event to get the scrolltop; if the scrolling height is between the offsettop of the ith title and the offsettop of the I + 1 title (for example, the height of the scrolling is between the offsettop of header1 and Header2, and heade1 is on the top), the box1 style is added to the ith title to achieve the topping.

window.onscroll = function () {
 //Gets the height of the scroll
 var st = document.documentElement.scrollTop || document.body.scrollTop;
 
 for(let i=0; i<len; i++) {
 If (st > ot [i] & & St < ot [i + 1]) {// listen to the position when scrolling, and set a realistic range for the title's topping
  box[i].className = 'box box1';
 } else {
  box[i].className = 'box';
 }
 
 }
}

5. In the fourth step, there is a problem: when the last heading (I) of the scroll track, it is not possible to get (I + 1).

Solution: take the last sublist (Section [0]) from the section tag set obtained in the first step, and then obtain the height of the last sublist, calculate the display height range of the last title, and store it in the OT array.

//Gets the height of the last sublist to set the position of the last header
//section[len-1].getBoundingClientRect().height
//This method returns a number
 
ot.push(box[len-1].offsetTop + section[len-1].getBoundingClientRect().height);

3、 Final effect

Complete JS code

var box =  document.getElementsByClassName ('box '), // get all the titles that need ceiling effect
 section =  document.getElementsByTagName ('section '); // get all sublists
 
Var ot = [], // stores the offsettop of each title
 len =  box.length ; // number of titles
 
for(let i=0; i<len; i++) {
 ot.push (box [i]. Offsettop); // get the offsettop of each title
}
 
//Gets the height of the last sublist to set the position of the last header
//section[len-1].getBoundingClientRect().height
//This method returns a number
 
ot.push(box[len-1].offsetTop + section[len-1].getBoundingClientRect().height);
 
window.onscroll = function () {
 //Gets the height of the scroll
 var st = document.documentElement.scrollTop || document.body.scrollTop;
 
 for(let i=0; i<len; i++) {
 If (st > ot [i] & & St < ot [i + 1]) {// listen to the position when scrolling, and set a realistic range for the title's topping
  box[i].className = 'box box1';
 } else {
  box[i].className = 'box';
 }
 
 }
}

The above is the whole content of this article, I hope to help you in your study, and I hope you can support developeppaer more.

Recommended Today

Dida travel cloud provides rich public travel for tens of millions of users

Alicloud Help Center – Alibaba cloud, a leading cloud computing service provider Company profile Our company is Hangzhou Jintong Technology Group Co., Ltd., established in 2009. Our company’s business is engaged in the development and application of public transportation intelligent management system, and is the world’s leading public bicycle system (Hangzhou public bicycle system) builder […]