私たちは、多くの場合、携帯電話の連絡先リストを参照して、このタイプの構成は、一般に2つの重要な結果を持っています
- イニシャル天井
- 迅速なポジショニング
今、私たちは何を実現するために来ます
ページ構造
こちらのページ構造は、単純に二つのリストということです
<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>その後、少しスタイルを追加
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;
}だから、レイアウトを見ることができます
HTTPS：//codepen.io/xboxyan/pe ...
天井には、結果を達成します
天井の効果は、新しいCSSプロパティを使用している限り、実際には非常に簡単であるposition:stickyことに
粘性要素（べとべとに位置する要素）配置粘着性の位置を計算した後、要素の属性です。
良好な適合性、少なくともモバイルエンドの使いやすさ
するために、.contacts dt追加しますposition:sticky
.contacts dt{
/*添加如下属性*/
position: sticky;
top: 0;
}各カテゴリの天井効果のこの実現
HTTPS：//codepen.io/xboxyan/pe ...
高速位置決め効果
あなたはJSがない場合、それは可能hrefローカリゼーションを達成するための方法のアンカー
具体的なアプローチがあります
<a href='#A'></a>
...
...
<div id='A'></div>
ページ全体をスクロール可能である場合には、これだけクリックしaて、ページがすぐにジャンプします、id=A要素
今私達のページの一部を追加herfし、id
<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 ...
あなたはすぐにページを見つけることができ、ナビゲーションボタンの右をクリック
だから、戻ってジャンプし、完全に送還のように、拡張されていない見つかったいくつかの問題を持っていると思われるAの結果が、Aラベルが出てきた、しかし、A次のリストが出てきませんでした
何が問題でしょうか？
繰り返し研究した後、その見つかったposition:sticky幽霊のうちに！
アップ位置決めは、我々が渡されたときhrefの位置に基づいて、過去の位置決めにある最初の目に見える位置の要素今回ものの圧縮要素が、それはそのようなAを引き起こしたので、次の要素は、表示されません問題
我々は問題を解決しなければならない問題を発見
すばやく効果の修理を見つけます
実際には、私たちがターゲットに希望もすることができA、以下のリストの最初の要素が、それは第一世代の要素である場合には、ときジャンプの一番上になりますので、それは、要素ではなく、Aカバーラベル。
私たちは、位置決めのために、タブを間に挿入するように、
以下のように、追加<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>確かにスペースを取るだろう、直接ここに置かれた場合、私たちは彼に上方への変位を入れて、表示されていない、次に設定するので、要素は、単に元のラベル位置にカバーされていること
以下の
.contacts .stikcy-fix{
position: static;
visibility: hidden;
margin-top: -2em;
}HTTPS：//codepen.io/xboxyan/pe ...
今、完璧なジャンプアップしていない、見て？
その他の詳細
通常、私たちはインデックスの右側を選択し、ページの真ん中の大文字が存在します
実装このCSSは擬似要素を使用するのは比較的簡単である場合にcontent:attr()することができ、前回の記事で（純粋なCSSで星を再生する効果を達成するため）にも言及されています
次の特定を達成するために
.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);
}ここで使用しcontent: attr(data-type)て、a上記の持っているdata-type性質を
<!--导航列表-->
<div class="index" id="index">
<a href='#A' data-type='A'>A</a>
<a href='#B' data-type='B'>B</a>
</div>第二に、実際のプロジェクトでは、我々は必要なjsこれらのリストを生成します
私たちは、次のようにデータが必要であることを前提と
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'
},
]
}
]このデータ・フォーマットが直接行います変換後端またはフロントエンドを返すために必要な場合があります
データは、に至るまで、その後のサイクルであります
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 ...
このセクションでは、js唯一の任意の論理機能せず、レイアウトを生成します
いくつかの欠点
素早い先アンカーリストが、ブラウザのアドレスバーが追加されます。この時間が、#Aこのような識別を、格好良い、そして第二に、あまりにも便利ではない、再び行くためにすべてのこれらのロゴを返します。デフォルトのブラウザを使用している場合。
インデックスの右側にスライド速いポジショニングをサポートしていませんが、インデックスが現在のカテゴリの右側を行うことはできませんスクロールリスト内の別の問題は、強調表示されます。
これらの詳細は唯一によるものとすることができるjs修正します。
シンプルで小さなプロジェクトが、それほど必要でない場合でも、純粋cssまたはウェルに適用、パフォーマンスはよりも、間違いなく良いですjs強いShanghao時間を聞いて転がり、そして限り、生成されたデータを直接使用することができるよう、参照を容易に^^