We often see the contact list on the phone, this type of arrangement generally have two significant results
- Initials Ceiling
- Rapid positioning
Now we come to realize what
Page Structure
Page structure here is simply that the two lists
<div class="con">
<!--联系人列表-->
<div class="contacts" id="contacts">
<dl>A</dt>
<dt>a1</dt>
<dt>a2</dt>
<dl>B</dt>
<dt>b1</dt>
<dt>b2</dt>
...
</div>
<!--导航列表-->
<div class="index" id="index">
<a>A</a>
<a>B</a>
</div>
</div>Then add a little style
html,body{
margin: 0;
height: 100%;
padding: 0;
}
dl,dd{
margin: 0;
}
.con{
position: relative;
height: 100%;
overflow-x: hidden;
}
.index{
position: absolute;
right: 0;
top: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.index a{
display: block;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
border-radius: 50%;
background: cornflowerblue;
text-decoration: none;
color: #fff;
outline: 0;
margin: 5px;
}
.contacts{
height: 100%;
background: #fff;
overflow: auto;
line-height: 2em;
}
.contacts dt{
background: bisque;
font-size: 1.5rem;
color:cornflowerblue;
height: 2em;
line-height: 2em;
padding: 0 10px;
}
.contacts dd{
padding: 0 10px;
display: block;
cursor: pointer;
}So you can see the layout
https://codepen.io/xboxyan/pe...
Ceiling achieve results
Ceiling effect is actually very simple, as long as the use of new css property position:stickyon it
Viscous positioned elements (stickily positioned element) is an element attribute After calculating the position of the sticky.
Good compatibility, ease of use at least a mobile end
To .contacts dtaddposition:sticky
.contacts dt{
/*添加如下属性*/
position: sticky;
top: 0;
}This realization of each category ceiling effect
https://codepen.io/xboxyan/pe...
Fast positioning effect
If you do not js, it can be hrefthe anchor of the ways to achieve localization
Specific approach is
<a href='#A'></a>
...
...
<div id='A'></div>
If the entire page is scrollable, so just click a, then the page will quickly jump to id=Athe elements
Now add some of our page herfandid
<div class="con">
<!--联系人列表-->
<div class="contacts" id="contacts">
<dl id='A'>A</dt>
<dt>a1</dt>
<dt>a2</dt>
<dl id='B'>B</dt>
<dt>b1</dt>
<dt>b2</dt>
...
</div>
<!--导航列表-->
<div class="index" id="index">
<a href='#A'>A</a>
<a href='#B'>B</a>
</div>
</div>https://codepen.io/xboxyan/pe...
Click to the right of the navigation buttons, you can quickly locate the page
And so, it seems to have some problems when jumping back and found not fully extended, like repatriation A, although the results of Athe label came out, however, Athe following list did not come out
What is the problem?
After repeated study found that position:stickyout of the ghost!
When the up positioning, we passed hrefpositioning in the past, based on location is to the elements of the first visible position , although this time the compressor element, but the following elements are not displayed, so it caused such a problem
Found the problem we must solve the problem
Quickly locate effect repair
In fact, we'd like to target can also be Athe first element of the list below, but it is not the element, because if it is the first generation element, when the jump will be on top of the Acover label.
So we insert a tab therebetween, for positioning
As follows, adding<dl class="stikcy-fix"></dt>
<div class="contacts" id="contacts">
<dl>A</dt>
<dl class="stikcy-fix" id='A'></dt>
<dt>a1</dt>
<dt>a2</dt>
<dl>B</dt>
<dl class="stikcy-fix" id='B'></dl>
<dt>b1</dt>
<dt>b2</dt>
...
</div>If placed directly here will certainly take up space, so we put him upward displacement, then setting is not visible, so that the element is just covered in the original label position
as follows
.contacts .stikcy-fix{
position: static;
visibility: hidden;
margin-top: -2em;
}https://codepen.io/xboxyan/pe...
Now look, is not perfect jump up?
Other details
Usually we choose the right side in the index, middle of the page there will be a capital letter
If implemented this css is relatively simple to use pseudo-element content:attr()can be, in the previous article (to achieve the effect of playing the stars with pure css) has also been mentioned
To achieve the following specific
.index a:active:after{
content: attr(data-type);
position: fixed;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
border-radius: 5px;
text-align: center;
line-height: 100px;
font-size: 50px;
transform: translate(-50%,-50%);
background: rgba(0,0,0,.5);
}Here used content: attr(data-type), so athe above have a data-typeproperty
<!--导航列表-->
<div class="index" id="index">
<a href='#A' data-type='A'>A</a>
<a href='#B' data-type='B'>B</a>
</div>Secondly, the actual project, we need jsto generate these lists
We assume that the data required as follows
var data = [
{
'type':'A',
'user':[
{
name:'a1'
},
{
name:'a2'
},
{
name:'a3'
},
{
name:'a1'
},
{
name:'a2'
},
{
name:'a3'
},
{
name:'a3'
},
{
name:'a1'
},
{
name:'a2'
},
{
name:'a3'
},
]
},
{
'type':'B',
'user':[
{
name:'b1'
},
{
name:'b2'
},
{
name:'b3'
},
{
name:'b1'
},
{
name:'b2'
},
{
name:'b3'
},
{
name:'b3'
},
{
name:'b1'
},
{
name:'b2'
},
{
name:'b3'
},
]
},
{
'type':'C',
'user':[
{
name:'c1'
},
{
name:'c2'
},
{
name:'c3'
},
{
name:'c1'
},
{
name:'c2'
},
{
name:'c3'
},
{
name:'c3'
},
{
name:'c1'
},
{
name:'c2'
},
{
name:'c3'
},
]
},
{
'type':'D',
'user':[
{
name:'d1'
},
{
name:'d2'
},
{
name:'d3'
},
{
name:'d1'
},
{
name:'d2'
},
{
name:'d3'
},
{
name:'d3'
},
{
name:'d1'
},
{
name:'d2'
},
{
name:'d3'
},
]
},
{
'type':'E',
'user':[
{
name:'e1'
},
{
name:'e2'
},
{
name:'e3'
},
{
name:'e1'
},
{
name:'e2'
},
{
name:'e3'
},
{
name:'e3'
},
{
name:'e1'
},
{
name:'e2'
},
{
name:'e3'
},
]
}
]This data format may be required to return the rear end or front end directly transform will do
The data is then cycle through to
var indexs = document.getElementById('index');
var contacts = document.getElementById('contacts');
var index_html = '';
var contacts_html = '';
data.forEach(el=>{
contacts_html += '<dl><dt>'+el.type+'</dt><dt class="stikcy-fix" id='+el.type+'></dt>';
index_html += '<a href="#'+el.type+'" data-type='+el.type+'>'+el.type+'</a>';
el.user.forEach(d=>{
contacts_html+='<dd>'+d.name+'</dd>';
})
contacts_html+='</dl>'
})
indexs.innerHTML = index_html;
contacts.innerHTML = contacts_html;https://codepen.io/xboxyan/pe...
This section jsonly generates layout, without any logic function
Some shortcomings
Although quick destination list by the anchor, but this time the browser address bar will add #Asuch identification, a good-looking, and second, when using the default browser will return all these logos to go again, not too convenient.
Another problem in the scrolling list, when the index can not do the right side of the current category is highlighted, while the right side of the index does not support the sliding fast positioning.
These details can only be by jsto fix.
But if a simple little project, not so much required, pure cssor well applicable, the performance is definitely better than by jsrolling listening strong Shanghao times, and ease of reference, as long as the data generated can be used directly ^^