Repeating some wheels selectively may not be a bad thing. Aaron's blog has added a suspended menu, which seems to be very tall. Although this kind of trick is not the first time I have seen it, I have never written it myself. Today I will selectively write about this function. The following is the development process of this wheel, which can also be regarded as an analysis and implementation process of a requirement document.
Demo address: http://sandbox.runjs.cn/show/to8wdmuy
Source code download: https://github.com/bjtqti/floatmenu
The first step is to create a dom section structure:
The code copy is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AppCarrier</title>
<link rel="stylesheet" href="menu.css">
</head>
<body>
<div id="content">
<h1 id="test1">test1</h1>
<p>The past can hurt. But you can either run from it or learn from it</p>
<p>The past was painful, but you either escape or grow from it</p>
<p>One meets his destiny on the road he takes to avoid it</p>
<p>It is often on the way to escape fate, but it encounters unexpectedly</p>
<p>Rules are meant to be broken</p>
<p>The rules should be broken. </p>
<p>Years may wrinkle the skin, but to give up enthusiasm wrinkles the soul.</p>
<p>The passing of time only makes the face old, but the passion no longer makes the heart wither. </p>
<h1 id="test2">test2</h1>
<p>Only by constantly practicing the knowledge you have learned can you truly master it. </p>
<p>Live every day to the fullest.</p>
<p>Enjoy every day. </p>
<p>Keep your eyes on the stars, and your feet on the ground.</p>
<p>Have lofty ambitions and keep your feet on the ground. </p>
<p>Always be up for an unexpected adventure.</p>
<p>Go ready to start an unexpected adventure at any time. </p>
<p>Life is full of disappointment. You can't dwell on things. You have to move on.</p>
<p>Life is often unhappy, don’t indulge in the past, and move forward bravely. </p>
<p>I'm a free spirit. I can't be caged.</p>
<p>My soul is free and should not be bound. </p>
<p>Sometimes the heart sees what is invisible to the eye.</p>
<p>Those who are out of sight can feel it</p>
<p>The simple things are also the most extraordinary things, and only the wise can see them.</p>
<p>The most ordinary thing is also the most extraordinary thing, and only the wise understand it. </p>
<h1 id="test3">test3</h1>
<p>how many xxxxxx</p>
<p>how many xxxxxx</p>
<p>how many xxxxxx</p>
<p>how many xxxxxx</p>
<p>how many xxxxxx</p>
<p>how many xxxxxx</p>
<p>how many xxxxxx</p>
<p>how many xxxxxx</p>
<p>how many xxxxxx</p>
<p>how many xxxxxx</p>
<p>how many xxxxxx</p>
<p>how many xxxxxx</p>
<p>how many xxxxxx</p>
<p>how many xxxxxx</p>
<p>how many xxxxxx</p>
<p>how many xxxxxx</p>
<h1 id="test4">test4</h1>
<p>how many xxxxxx</p>
<p>how many xxxxxx</p>
<p>how many xxxxxx</p>
<p>how many xxxxxx</p>
<p>how many xxxxxx</p>
<p>how many xxxxxx</p>
<p>how many xxxxxx</p>
<p>how many xxxxxx</p>
<p>how many xxxxxx</p>
<p>how many xxxxxx</p>
<p>how many xxxxxx</p>
<p>how many xxxxxx</p>
<p>how many xxxxxx</p>
<p>how many xxxxxx</p>
<p>how many xxxxxx</p>
<p>how many xxxxxx</p>
</div>
<div id="menubar">
<p>Hide</p>
<ul>
<li><a href="#test1">test1</a></li>
<li><a href="#test2">test2</a></li>
<li><a href="#test3">test3</a></li>
<li><a href="#test4">test4</a></li>
</ul>
</div>
</body>
<script src="menu.js"></script>
</html>
The second step is to prepare the css file:
The code copy is as follows:
ul {
list-style-type: none;
}
a {
text-decoration: none;
}
/*Article content area*/
#content {
width:400px;
margin: 0 auto;
font-size: 2em;
}
/*Floating menu*/
.menu {
position: fixed;
top:20%;
right: 0;
width:200px;
border: 1px solid gray;
border-radius: 5px;
}
.menu li {
height: 2em;
line-height: 2em;
}
.red {
color : red;
}
.hide {
display: none;
}
/*Hide floating menu*/
.slideIn {
transform : translate3d(202px, 0, 0);
transition-duration : .5s;
}
/*Show the floating menu*/
.slideOut {
transform : translate3d(0, 0, 0);
transition-duration : .5s;
}
.static {
color:#007aff;
text-align: center;
}
/*Show the floating ball*/
.toShow {
display: block;
width: 4.8em;
height: 2em;
line-height: 2em;
border-radius: .5em;
border:1px solid gray;
transform : translate3d(-5em, 0, 0);
transition-duration : 1s;
}
The third step starts writing js code:
The code copy is as follows:
(function(doc){
//Collect link locations for each chapter
var pos = [],
//Collection of items on the menu
links = doc.getElementsByTagName('a'),
//Collect the title of the chapter
titles = doc.getElementsByTagName('h1'),
//Hanging menu
menu = doc.getElementById('menubar'),
//Current selection
currentItem=null;
//Add a red style
var addClass = function (element){
currentItem && currentItem.removeAttribute('class');
element.setAttribute('class','red');
currentItem = element;
},
//The web page is rolled out high:
getScrollTop = function (){
return Math.ceil(document.body.scrollTop)+1;
},
//Calculate the scroll position
startScroll = function (){
var scrollTop = getScrollTop(),
len = titles.length,
i = 0;
//Article 1
if(scrollTop>=0 && scrollTop<pos[0]){
addClass(links[0]);
return;
}
//The last one
if(scrollTop>=pos[len-1]){
addClass(links[len-1]);
return;
}
//middle
for(;i<len;i++){
if(scrollTop > pos[i] && scrollTop < pos[i+1]){
addClass(links[i]);
break;
}
}
};
//Click on the link in the list to change color
menu.onclick=function(e){
var target = e.target || e.srcElement;
if(target.nodeName.toLowerCase() === 'a'){
// List item status indication
addClass(target);
return;
}
if(target.nodeName.toLowerCase() === 'p'){
if(target.className == 'static'){
//Hide menu
this.className = 'menu slideIn';
setTimeout(function(){
target.className = 'static toShow';
target.innerHTML = 'Show';
},1000);
}else{
//Show menu
target.className = 'static';
target.innerHTML = 'hide';
this.className = 'menu slideOut';
}
}
}
//Calculate the initial position of each chapter
var ln = titles.length;
while(--ln>-1){
//titles[len].offsetParent.offsetTop = 0;
pos.unshift(titles[ln].offsetTop);
}
startScroll();
//Scroll
window.onscroll = function(){
startScroll()
}
})(document);
analyze:
1. Implement automatic jump to the specified section
This step can be done using the anchor function of the <a> tag. Since html5 does not support the name attribute in the future (HTML5 does not support it. Specify the name of the anchor.), consider using ID to jump.
2. Identify which chapter in the content on the left belongs to the item in the floating menu.
This step is a difficult point, let’s briefly analyze it:
2.1 The first case is to click on the menu item manually. This is easy, just identify the clicked element.
2.2 In the second case, scroll or drag the scrollbar through the middle mouse button. At this time, you need to associate the content on the left and the menu items on the right. This is the most difficult part. Consider the strategy of implementing step by step, starting with easy and then difficult, and each one breaks through.
2.2.1 First collect the coordinate height of the title element. That is the vertical height of all h1 tags. Save array 1.
2.2.2 Collect the element a in menu item and store it in array 2.
2.2.3 Listen to the scroll event and determine which menu item the current content belongs to.
When taking one step, it is recommended to draw a picture on the manuscript paper:
A1
******************
* A2
*
******************
* A3
*
******************
*
* A4
*
Every time you scroll, you will determine which range the current scrolling distance is. If it is 0 to A1, it is Chapter 1, A1 to A2, it is Chapter 2, and so on.
Regarding the position height of the element, I simply use element.offsetTop to get it here. There may be compatibility issues. If you use jquery, it should be $('element').offset().top,
Similarly, I simply used document.body.scrollTop to get the height of the scrollbar. If it is replaced with jquery, it should be $(window).scrollTop();
The purpose of drawing is to concretize abstract problems, help us think and find out the rules. Maybe it will look taller by calling it "modeling".
It should be emphasized that the relationships in array 1 and array 2 should correspond one by one. For example, the corresponding <a href="#h1"> is <h1 id="h1">.
2.3 In the third case, the menu status indicator when you directly enter the page. For example, if you enter through an address like index.html#h3, the h3 in the menu should be highlighted.
3. Implement the display and hide animation of the floating menu.
3.1 This step should be relatively simple, you can consider doing it first. Just use the tramsform property of css3. It is simple and efficient. If you cross-browser, please be compatible.
Note that transform: translate3d (x-axis, y-axis, z-axis); Using 3d can use hardware acceleration to increase animation effects, but power consumption will increase, so make good use of it! The first parameter is to control the left and right directions. If it is positive, it means moving to the right, and if it is negative, it means moving to the left. This is actually not rigorous. In fact, it should be determined based on the reference point. For example, when the x coordinate of an element is 0, then the value of x is increased to the right and reduced to the left, and 0 is reset.
After the analysis, the code is written. There is nothing to say about this. Enjoy the musical feeling generated by typing the keyboard.
After writing, preview it, click the menu, jump to the specified chapter, and click the item to turn red, refresh the current page, and the dependency display is correct. Slide the scroll wheel, and the menu items change accordingly with the changes in content. Drag the scroll bar. The same is true. Finally, click to hide, retract the menu, click to show, and the menu slides out. This will complete the suspension function.
The above is all about this article, I hope you like it.