It may not be a bad thing to have a selective repetition of some wheels. Aaron's Blog adds a floating menu that looks like a big one. Although this kind of trick is not the first time to see, but never wrote it himself. Take this feature and write it today. The following is the development process of the wheel, also can be considered as a requirement document analysis and implementation process.
Demo Address: Http://sandbox.runjs.cn/show/to8wdmuy
SOURCE Download: Https://github.com/bjtqti/floatmenu
The first step is to create a DOM node structure:
Copy Code code 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 can either run from it or learn from it</p>
<p> the past is painful, but you either run from it or grow from it </p>
<p>one meets his destiny on the road him takes to avoid it</p>
<p> is often on the way to escape from fate, but encounter with it </p>
<p>rules are meant to be broken</p>
The <p> rules should be broken. </p>
<p>years may wrinkle the skin, but to give up enthusiasm wrinkles the soul.</p>
The passing of the <p> years only makes the face old, the passion no longer makes the soul wither. </p>
<H1 id= "Test2" >test2</h1>
<p> only by practicing the knowledge you learn, can you really master it. </p>
<p>live every day to the fullest.</p>
<p> enjoy daily. </p>
<p>keep your eyes on the "stars" and your feet on the ground.</p>
<p> Lofty, down-to-earth. </p>
<p>always is up to an unexpected adventure.</p>
<p> ready to start an unexpected adventure. </p>
<p>life is full of disappointment. You can ' t dwell on things. Have to move on.</p>
<p> life is often inferior, do not indulge in the past, to go forward. </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> invisible, heart can feel the </p>
<p>the simple things are also the most extraordinary, and only the wise can, things
<p> the most ordinary thing is also the most extraordinary thing, only the wise man understand. </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 class= "menu" id= "menubar" >
<p class= "Static" > 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:
Copy Code code as follows:
UL {
List-style-type:none;
}
A
Text-decoration:none;
}
/* Article content area * *
#content {
width:400px;
margin:0 Auto;
Font-size:2em;
}
/* Suspension 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;
}
/* Hidden Suspension Menu * *
. Slidein {
Transform:translate3d (202px, 0, 0);
Transition-duration:. 5s;
}
/* Display suspension Menu/*
. slideout {
Transform:translate3d (0, 0, 0);
Transition-duration:. 5s;
}
. static {
Color: #007aff;
Text-align:center;
}
/* Show suspended 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 begins to write the JS code:
Copy Code code as follows:
(function (DOC) {
Collect link locations for each chapter
var pos = [],
Collecting items on a menu
Links = doc.getelementsbytagname (' a '),
Collect title of chapter
Titles = Doc.getelementsbytagname (' H1 '),
Suspension Menu
menu = Doc.getelementbyid (' menubar '),
The 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 up high:
Getscrolltop = function () {
Return Math.ceil (DOCUMENT.BODY.SCROLLTOP) +1;
},
Calculate scroll position
Startscroll = function () {
var scrolltop = Getscrolltop (),
Len = Titles.length,
i = 0;
First article
if (scrolltop>=0 && scrolltop<pos[0]) {
AddClass (Links[0]);
Return
}
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 = ' hidden ';
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 ();
Monitor scrolling
Window.onscroll = function () {
Startscroll ()
}
}) (document);
Analysis:
1. Implement automatic jump to specified section
This step can be done using the anchor function of the <a> tag, because HTML5 does not support the Name property later (HTML5 is not supported.) The name of the specified anchor. ), so consider using an ID to jump.
2. Identifies which chapter in the left content is the item in the suspended menu.
This is a difficult step, the first simple analysis:
2.1 The first situation, is the human click menu item. This is easy, as long as the identification of the clicked element is OK.
2.2 In the second case, scroll or drag the scroll bar through the middle mouse button, which is the hardest place to associate the left content with the menu item on the right. Consider the implementation of step-by-step, first easy after difficult, each of the strategy of the break.
2.2.1 First collects the coordinate height of the header element. That is, the vertical height of all H1 labels. stored in array 1.
2.2.2 collects a element from the menu item and stores it in array 2.
2.2.3 listens for scrolling events to determine which menu item the current content belongs to.
When doing a step, it is recommended to draw a picture on the manuscript:
A1
****************
* A2
*
****************
* A3
*
****************
*
* A4
*
Each time you scroll, you will determine which range the current scrolling distance is, if 0 to A1 is the 1th chapter, A1 to A2 is the 2nd chapter, and so on.
As for the position height of the element, I simply use element.offsettop to get it, there may be compatibility issues, and if you do it in jquery, it should be $ (' element '). Offset (). Top,
Similarly, the height of the scroll bar, I was also a simple use of document.body.scrollTop to get, if the change to jquery, it should be $ (window). scrolltop ();
The function of drawing is to embody the abstract problem, to help us think and find the law. Maybe it's called "modeling" that looks bigger.
It is important to emphasize that the relationships in array 1 and 2 should be one by one corresponding. such as <a href= "#h1" > Corresponds to <H1 id= "H1" >.
2.3 The third case, direct access to the page when the menu status instructions. For example, by index.html#h3 such an address, the H3 should be highlighted in the menu.
3. Realize the display and hidden animation of the floating menu.
3.1 This step should be relatively simple, you can consider doing it first. Take advantage of the CSS3 Tramsform attribute on it, simple and efficient, cross-browser, and be aware of compatibility.
Note Transform:translate3d (x axis, y axis, z axis); 3d can be used to accelerate the use of hardware, increase animation effect, but the power consumption will increase, use! The first parameter is to control the left and right direction, and if it is positive, it will move to the left and if it is negative. In fact, it is not rigorous, in fact, should be based on the reference point to determine, such as the element at the rest of the X coordinate is 0, then increase the value of x to the right, reduced to the left, 0 for the reset.
After the analysis, the code is written. There is nothing to say. Enjoy the musical sense of tapping the keyboard.
After writing, preview, click on the menu, jump into the specified chapter, and click on the item to red, refresh the current page, rely on the display correct. Slide the wheel, menu items as the content changes and corresponding changes, drag the scroll bar, but also, and finally click on the hidden, menu shrink back, click on the show, the menu slide out. So the suspension function is done.
The above is the entire content of this article, I hope you can enjoy.
