首页 > 建站教程 > JS、jQ、TS >  js 页面级楼层代码和在容器内的楼层效果实现正文

js 页面级楼层代码和在容器内的楼层效果实现

1.png


先解释下:页面级指的是,楼层滚动是在整个body中滚动,div内的楼层指的是,在某个容器,如div、ul内滚动,区别在于,一个是获取document的滚动距离,监听滚动也是监听window的滚动事件,容器内滚动,获取的是子元素相对于父容器的偏移量,监听滚动也是这个容器的滚动事件:


页面级的楼层代码如下:

html代码:

<body>
<!-- 导航条 -->
<ul class="floor-nav">
    <li class="active">楼层1</li>
    <li>楼层2</li>
    <li>楼层3</li>
    <li>楼层4</li>
    <li>楼层5</li>
</ul>
<!-- 滚动内容 -->
<div class="foor-conent">
    <div class="course">新上好课</div>
    <div class="learn">进站必学</div>
    <div class="path">学习路线</div>
    <div class="special">慕课专栏</div>
    <div class="group">限时拼团</div>
</div>
</body>


js代码:

var contents = document.querySelectorAll('.foor-conent div')
var floors = document.querySelectorAll('.floor-nav li')
var arr = []
for (i = 0; i < contents.length; i++) {
    arr.push(contents[i].offsetTop)
}
for (j = 0; j < floors.length; j++) {
    floors[j].index = j;
    floors[j].onclick = function() {
        window.scrollTo({
            top: arr[this.index],
            behavior: 'smooth'
        })
    }
}
window.onscroll = function() {
    var h = document.documentElement.scrollTop || document.body.scrollTop
    var index = 0
    for (var i = 0; i < arr.length; i++) {
        if (h > arr[i]) {
            index = i
        } else {
            break;
        }
    }
    for (var j = 0; j < floors.length; j++) {
    // active 为高亮当前楼层导航的class样式
        floors[j].classList.remove('active')
    }
    floors[index].classList.add('active')
}


某个容器内的楼层代码如下:

html代码:

<body>
<!-- 导航条 -->
<ul class="floor-nav">
    <li class="active">楼层1</li>
    <li>楼层2</li>
    <li>楼层3</li>
    <li>楼层4</li>
    <li>楼层5</li>
</ul>
<!-- 滚动内容,滚动的是content-wrap -->
<div class="content-wrap">
<div class="foor-conent">
    <div class="course">新上好课</div>
    <div class="learn">进站必学</div>
    <div class="path">学习路线</div>
    <div class="special">慕课专栏</div>
    <div class="group">限时拼团</div>
</div>
</div>
</body>


js代码:

var wraps = document.querySelector('.content-wrap')
var contents = document.querySelectorAll('.foor-conent div')
var floors = document.querySelectorAll('.floor-nav li')
var arr = []
for (i = 0; i < contents.length; i++) {
    arr.push(contents[i].offsetTop)
}
for (j = 0; j < floors.length; j++) {
    floors[j].index = j;
    floors[j].onclick = function() {
    // 这里和页面级的不同,监听的是滚动的div
        wraps.scrollTo({
            top: arr[this.index],
            behavior: 'smooth'
        })
    }
}
// 这里和页面级的不同,监听事件触发的主体为div
wraps.onscroll = function(e) {
    var h = e.target.scrollTop
    var index = 0
    for (var i = 0; i < arr.length; i++) {
        if (h > arr[i]) {
            index = i
        } else {
            break;
        }
    }
    for (var j = 0; j < floors.length; j++) {
    // active 为高亮当前楼层导航的class样式
        floors[j].classList.remove('active')
    }
    floors[index].classList.add('active')
}