模拟通讯录字母标题栏，滚动至顶部区域固定
直接上代码
HTML
<section class="list-header">
<div class="list-title-box">
<div class="img-box">
<a href="#">
<img src="img/find_shop/go_back@2x.png">
</a>
</div>
<div class="list-title">
<span class="size_18">奥迪</span>
</div>
</div>
</section>
<section class="car-big-container">
<!-- fixed 标题栏 -->
<section class="biaotilan-box-fixed">
<p class="size_12"></p>
</section>
<!-- 标题栏 -->
<section class="series-template">
<div class="biaotilan-box">
<p class="size_12">A</p>
</div>
<!-- 内容 -->
<div class="carseries-all">
<ul>
<li>
<a href="#">
<p class="size_13">奥迪A6L</p>
<img src="img/find_shop/right-jiantou@2x.png">
</a>
</li>
</ul>
</div>
</section>
<section class="series-template">
<div class="biaotilan-box">
<p class="size_12">B</p>
</div>
<!-- 内容 -->
<div class="carseries-all">
<ul>
<li>
<a href="#">
<p class="size_13">奥迪A6L</p>
<img src="img/find_shop/right-jiantou@2x.png">
</a>
</li>
<li>
<a href="#">
<p class="size_13">奥迪A6L</p>
<img src="img/find_shop/right-jiantou@2x.png">
</a>
</li>
</ul>
</div>
</section>
<section class="series-template">
<div class="biaotilan-box">
<p class="size_12">C</p>
</div>
<!-- 内容 -->
<div class="carseries-all">
<ul>
<li>
<a href="#">
<p class="size_13">奥迪A6L</p>
<img src="img/find_shop/right-jiantou@2x.png">
</a>
</li>
<li>
<a href="#">
<p class="size_13">奥迪A6L</p>
<img src="img/find_shop/right-jiantou@2x.png">
</a>
</li>
<li>
<a href="#">
<p class="size_13">奥迪A6L</p>
<img src="img/find_shop/right-jiantou@2x.png">
</a>
</li>
</ul>
</div>
</section>
<section class="series-template">
<div class="biaotilan-box">
<p class="size_12">D</p>
</div>
<!-- 内容 -->
<div class="carseries-all">
<ul>
<li>
<a href="#">
<p class="size_13">奥迪A6L</p>
<img src="img/find_shop/right-jiantou@2x.png">
</a>
</li>
<li>
<a href="#">
<p class="size_13">奥迪A6L</p>
<img src="img/find_shop/right-jiantou@2x.png">
</a>
</li>
<li>
<a href="#">
<p class="size_13">奥迪A6L</p>
<img src="img/find_shop/right-jiantou@2x.png">
</a>
</li>
<li>
<a href="#">
<p class="size_13">奥迪A6L</p>
<img src="img/find_shop/right-jiantou@2x.png">
</a>
</li>
</ul>
</div>
</section>
<section class="series-template">
<div class="biaotilan-box">
<p class="size_12">E</p>
</div>
<!-- 内容 -->
<div class="carseries-all">
<ul>
<li>
<a href="#">
<p class="size_13">奥迪A6L</p>
<img src="img/find_shop/right-jiantou@2x.png">
</a>
</li>
<li>
<a href="#">
<p class="size_13">奥迪A6L</p>
<img src="img/find_shop/right-jiantou@2x.png">
</a>
</li>
<li>
<a href="#">
<p class="size_13">奥迪A6L</p>
<img src="img/find_shop/right-jiantou@2x.png">
</a>
</li>
<li>
<a href="#">
<p class="size_13">奥迪A6L</p>
<img src="img/find_shop/right-jiantou@2x.png">
</a>
</li>
</ul>
</div>
</section>
<section class="series-template">
<div class="biaotilan-box">
<p class="size_12">F</p>
</div>
<!-- 内容 -->
<div class="carseries-all">
<ul>
<li>
<a href="#">
<p class="size_13">奥迪A6L</p>
<img src="img/find_shop/right-jiantou@2x.png">
</a>
</li>
<li>
<a href="#">
<p class="size_13">奥迪A6L</p>
<img src="img/find_shop/right-jiantou@2x.png">
</a>
</li>
<li>
<a href="#">
<p class="size_13">奥迪A6L</p>
<img src="img/find_shop/right-jiantou@2x.png">
</a>
</li>
<li>
<a href="#">
<p class="size_13">奥迪A6L</p>
<img src="img/find_shop/right-jiantou@2x.png">
</a>
</li>
</ul>
</div>
</section>
<section class="series-template">
<div class="biaotilan-box">
<p class="size_12">G</p>
</div>
<!-- 内容 -->
<div class="carseries-all">
<ul>
<li>
<a href="#">
<p class="size_13">奥迪A6L</p>
<img src="img/find_shop/right-jiantou@2x.png">
</a>
</li>
<li>
<a href="#">
<p class="size_13">奥迪A6L</p>
<img src="img/find_shop/right-jiantou@2x.png">
</a>
</li>
<li>
<a href="#">
<p class="size_13">奥迪A6L</p>
<img src="img/find_shop/right-jiantou@2x.png">
</a>
</li>
<li>
<a href="#">
<p class="size_13">奥迪A6L</p>
<img src="img/find_shop/right-jiantou@2x.png">
</a>
</li>
</ul>
</div>
</section>
<section class="series-template">
<div class="biaotilan-box">
<p class="size_12">H</p>
</div>
<!-- 内容 -->
<div class="carseries-all">
<ul>
<li>
<a href="#">
<p class="size_13">奥迪A6L</p>
<img src="img/find_shop/right-jiantou@2x.png">
</a>
</li>
<li>
<a href="#">
<p class="size_13">奥迪A6L</p>
<img src="img/find_shop/right-jiantou@2x.png">
</a>
</li>
<li>
<a href="#">
<p class="size_13">奥迪A6L</p>
<img src="img/find_shop/right-jiantou@2x.png">
</a>
</li>
<li>
<a href="#">
<p class="size_13">奥迪A6L</p>
<img src="img/find_shop/right-jiantou@2x.png">
</a>
</li>
</ul>
</div>
</section>
</section>
JS
<script>
// 顶部标题栏随滚动区域固定
// 获取相关元素高度
var headerH = document.querySelector('.list-header').clientHeight;
var BTLH = document.querySelector('.biaotilan-box').clientHeight;
// 创建数组
var arr = [];
// 将每一块高度遍历放入数组
$(".series-template").each(function(){
let ht = $(this).height();
arr.push(ht);
});
// 默认第一个要显示的
$('.biaotilan-box-fixed p').text($('.series-template .biaotilan-box p').eq(0).text());
// 监听滚动条
window.addEventListener("scroll", function(event) {
var scrollT = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
// 封装函数
function f(m){
var x = 0;
for(var i in arr){
x += arr[i];
if(i==m){
return x;
}
}
}
// 循环赋值
for(var y=0; y<=arr.length; y++){
if(scrollT >= f(y-1)+headerH-BTLH) {
$('.biaotilan-box-fixed p').text($('.series-template .biaotilan-box p').eq(y).text());
}else if(scrollT<=f(0)){
$('.biaotilan-box-fixed p').text($('.series-template .biaotilan-box p').eq(0).text());
}
}
});
</script>
网友评论