安卓端网页浏览过程中实时更新title的web实现

时间:2022-07-29 13:19:43
 $(function () {
var scrollTop = 0, //缓存上一次触发scroll的时候的scrollTop值
appendIndex = 0, //由于第23行append这个操作需要时间,在这个时间内可能多次触发scroll事件,为了不会append多次,这里缓存一个appendIndex变量,标识是否已经进行append操作
removeIndex = 0, //同上,为了第46行不会detach多次
firstTitle = $("p.contentTitle").eq(0);
if (firstTitle != undefined) {
$("#topTitle p.titleNormal").html(firstTitle.html());
}
$(window).scroll(function () {
var topTitle = $("#topTitle p"), //顶部title
topTitleWrap = $("#topTitle"), //顶部title的容器
curIndex = parseInt(topTitle.last().attr("data-index")), //顶部title最后的索引值
nextTitle = $("p.contentTitle").eq(curIndex + 1), //向上滑动时下一个title
prevTitle = $("p.contentTitle").eq(curIndex - 1), //向下滑动时上一个title
curTitle = $("p.contentTitle").eq(curIndex),
curScrollTop = $("body").scrollTop(); //取得当前scrollTop的值 if (curScrollTop > scrollTop) {//如果向上滑动
if (nextTitle[0] != undefined) {
if (nextTitle[0].getBoundingClientRect().top <= 52) {//如果下一个title与顶部的title贴到一起或者超过它
var nextTitleIndex = parseInt(nextTitle.attr("data-i")) - 1; //下一个title的索引值
var lastTitleIndex = parseInt(topTitle.last().attr("data-index")); //顶部最后一个title的索引值
if (nextTitleIndex == lastTitleIndex + 1) {
if (appendIndex == lastTitleIndex) {
topTitleWrap.html("<p class='titleNormal' data-index=" + nextTitleIndex + ">" + nextTitle.html() + "</p>");
}
removeIndex = nextTitleIndex;
appendIndex = nextTitleIndex;
}
}
}
}
else {//如果向下滑动
if (prevTitle[0] != undefined && curTitle[0] != undefined) {
if (curTitle[0].getBoundingClientRect().top >= 0) {
var prevTitleIndex = parseInt(curTitle.attr("data-i")) - 1;
var lastTitleIndex = parseInt(topTitle.last().attr("data-index"));
if (prevTitleIndex == lastTitleIndex) {
if (removeIndex == lastTitleIndex && removeIndex != 0) {
topTitleWrap.html("<p class='titleNormal' data-index=" + parseInt(curIndex - 1) + ">" + prevTitle.html() + "</p>");
}
if (curTitle.attr("data-i") - 1 > 0) {
appendIndex = prevTitleIndex - 1;
removeIndex = prevTitleIndex - 1;
}
}
}
}
}
scrollTop = curScrollTop;
});
});