bootstrap实现仿bilibili右侧导航条

最新推荐文章于 2022-02-04 17:08:21 发布

chengroucang5843

最新推荐文章于 2022-02-04 17:08:21 发布

阅读量1.1k

点赞数 2

原文链接：https://my.oschina.net/cnzxzc/blog/684141

版权

B站效果：简单模仿：

html代码如下

   <div class="side-nav" role="navigation">
        <ul class="nav-side-nav">
            <li><a href="#onepage"  id="one-nav" class="tooltip-side-nav on"></a></li>
            <li><a href="#twopage"  id="two-nav" class="tooltip-side-nav"></a></li>
            <li><a href="#threepage"  id="three-nav" class="tooltip-side-nav"></a></li>
            <li><a href="#fourpage"  id="four-nav" class="tooltip-side-nav"></a></li>
            <li><a href="#fivepage"  id="five-nav" class="tooltip-side-nav"></a></li>
        </ul>
    </div>

在body部分需要加上滚动监听：

<body id="main" onscroll="myFunction()">

CSS

.side-nav{
    position: fixed;
    top:45%;
    right:20px;
    z-index: 1;
}
.side-nav ul.nav-side-nav{
    text-align: center;
    list-style: none;
    margin: 0;
    padding-left: 0;
}
.side-nav ul.nav-side-nav > li{
    display: block;
    line-height: 1.45em;
    margin: 0;
    padding: 8px 0;
}
.side-nav ul.nav-side-nav > li > a{
    display: block;
    width:10px;
    height:10px;
    border: 2px solid #fff;
    background-color: transparent;
    border-radius: 50%;
}
.side-nav ul.nav-side-nav > li > a.on{
    background-color: #fff;
}

Js代码：

function myFunction(){
            var currTop = $('#main').scrollTop();
            var oneTop = $('#onepage').offset().top;
            var twoTop = $('#twopage').offset().top;
            var threeTop = $('#threepage').offset().top;
            var fourTop = $('#fourpage').offset().top;
            var fiveTop = $('#fivepage').offset().top;
            //在第1屏
            if(currTop < twoTop*0.8){
                $('#one-nav').addClass('on');
                $('#two-nav,#three-nav,#four-nav,#five-nav').removeClass('on');
            }
            //在第2屏
            if(currTop >= twoTop*0.8){
                $('#two-nav').addClass('on');
                $('#one-nav,#three-nav,#four-nav,#five-nav').removeClass('on');
            }
            //在第3屏
            if(currTop >= (threeTop - twoTop) * 0.8 + twoTop){
                $('#three-nav').addClass('on');
                $('#two-nav,#one-nav,#four-nav,#five-nav').removeClass('on');
            }
            //在第4屏
            if(currTop >= (fourTop - threeTop) * 0.8 + threeTop){
                $('#four-nav').addClass('on');
                $('#two-nav,#three-nav,#one-nav,#five-nav').removeClass('on');
            }
            //在第5屏
            if(currTop >= (fiveTop - fourTop) * 0.8 + fourTop){
                $('#five-nav').addClass('on');
                $('#two-nav,#three-nav,#four-nav,#one-nav').removeClass('on');
            }
        }

转载于:https://my.oschina.net/cnzxzc/blog/684141

chengroucang5843

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
bootstrap实现仿bilibili右侧导航条

B站效果：简单模仿： html代码如下 <div class="side-nav" role="navigation"> <ul class="nav-side-nav"> ...
复制链接

扫一扫