开发者社区> awbeci> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

制作stick侧边栏导航效果

简介: 其实这种效果网上好多的插件,但是我想自己实现看看,其实把思路理清实现起来就非常简单了,让我们看看: 分析: 从图中我们可以看出:右边的top=100px,那么它应该在第一个框的top+height=150px区域内,  当鼠标滚动到第2个区域时,同理,右边的top,应该在第2个框的top+height内 ,这样思路理清了,那么接下来我们来实现吧。
+关注继续查看

其实这种效果网上好多的插件,但是我想自己实现看看,其实把思路理清实现起来就非常简单了,让我们看看:

分析:

从图中我们可以看出:右边的top=100px,那么它应该在第一个框的top+height=150px区域内,

 当鼠标滚动到第2个区域时,同理,右边的top,应该在第2个框的top+height内 ,这样思路理清了,那么接下来我们来实现吧。
<nav class="sidebar">
        <ul>
            <li>F1-植物王国</li>
            <li>F2-动物世界</li>
            <li>F3-科学探秘</li>
            <li>F4-文化节日</li>
            <li>F5-成长健康</li>
            <li>F6-生活百科</li>
            <li>F7-艺术欣赏</li>
            <li>F8-语言乐园</li>
            <li>F9-数学小天地</li>
        </ul>
    </nav>
/*侧边栏开始*/
.sidebar {
    border: 1px solid #E5E9EF;
    position: fixed;
    width: 100px;
    right: 12%;
    top: 45%;
    border-radius: 4px;
}

.sidebar>ul {
    
}

.sidebar>ul>li {
    padding: 10px;
    width: 100px;
    cursor: pointer;
}

.sidebar .active {
    background-color: #06A3D7;
    color: #fff;
}
/*侧边栏结束*/
$(window).scroll(function() {
        //这里是要显示的div的id,一定要按照从上到下的顺序排列,如果有新的可以往后加
        var tops = [ 'f1', 'f2', 'f3', 'f4' ];
        for (var i = 0; i < tops.length; i++) {
            var top = $('.sidebar ul li').eq(i).offset().top;
            var t = $('#' + tops[i]).offset().top;
            var h = $('#' + tops[i]).height();
            if (top > t && top < t + h) {
                $('.sidebar ul li').removeClass('active');
                $('.sidebar ul li').eq(i).addClass('active');
            }
            if (top < t && i == 0) {
                $('.sidebar ul li').removeClass('active');
            }
        }
    });

 

效果图:

总结:

1、刚开始做的时候没有思绪,然后一个朋友给了一段自己写的代码,我就参考一下然后自己优化了一下它的代码

2、默认在页面最上面应该不显示active状态,所以第2个if判断至关重要!!!

参考:

http://www.bootcss.com/p/stickup/

 

 

===========================================分割线=========================================================

上面是依据sidebar来判断div的,也就是说当div和sidebar同处同一水平线,那么导航就高亮,现在我参照bilibili的网站,它的是当div在屏幕可见区域1/4位置时导航就高亮,所以代码改成:

$(document).on('scroll', function() {
        var height = $(window).height();
        var tops = [ 'f1', 'f2', 'f3', 'f4' ];
        for (var i = 0; i < tops.length; i++) {
            var rectop = $('#' + tops[i])[0].getBoundingClientRect().top;
            console.log('rectop=' + rectop)
            if (rectop < height /4) {
                $('.sidebar ul li').removeClass('active');
                $('.sidebar ul li').eq(i).addClass('active');
            } else if (i == 0) {
                $('.sidebar ul li').removeClass('active');
            }
        }
    });

    $(".sidebar ul li").click(function(e) {
        var index = $(this).index();
        var height = $(window).height();
        $("html,body").animate({
            scrollTop : $('#f' + (parseInt(index) + 1)).offset().top
        }, 500);
    });
    $(".sidebar a").click(function(e) {
        $("html,body").animate({
            scrollTop : $('body').offset().top
        }, 500);
    });

 总结:这样虽然完成了,但是最后一个div如果没有达到屏幕可见区域的1/4位置,那么导航就不高亮,bilibili的做法是,直接去掉最后一个导航,而我的做法是最后div的margin-bottom设置成200px,那就会“撑”到1/4位置了。

参考:http://www.bilibili.com/

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
HTMl+CSS制作二级菜单或二级导航栏
 二级菜单的实现思路为: 1.在默认状态下,使用display:none;将二级菜单隐藏。  2.当一级菜单中的列表标签li获取焦点(hover)后,使用display:blick;将二级菜单显示出来。  3.使用position: relative;和position: absolute;分别得一级菜单和二级菜单设置相对定位和绝对定位。
351 0
降低数据分析门槛,Quick BI成为大东鞋业8000家门店的数据导航
在新零售的大背景趋势之下,消费者需求呈现极度多元和易变,一部偶像剧的热播也许就能带火各种流行爆款。
239 0
侧边栏菜单导航
在线演示 本地下载
1107 0
在Quick BI中如何制作带层次结构的动态地图仪表板
背景: 一家虚拟的公司,名字叫做乐佳办公用品电子商务有限公司,该公司的销售业务遍布全中国,为了实现数据化运营的目标,乐佳公司的销售部门需要准确、直观、全面地了解自己公司的销售业务状况。 销售部当前最迫切的一个需求就是: 在地图上,可以方便的查询到在过去几年的任意指定的月份区间内,公司在全国各大区域的销售订单金额和利润金额,点击区域可以下钻到省份,可以看到选定的月份区间以省份为粒度的销售订单金额和利润金额。
4103 0
学习使用 CSS3 制作网站面包屑导航效果
  作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面。在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果。     效果演示     插件下载     详细教程   HTML示例代码: ...
745 0
导航
引用:http://news.imeigu.com/a/1313742363310.html 2.360网址导航页的广告潜力不止体现在首页 提问:导航广告位置非常有限,如何解决持续增长的问题? 徐祚立:其实导航页的潜力不止是在首页上。
795 0
60佳优秀的 Photoshop 网页制作教程【上篇】
  曾经和大分享过几篇优秀的 Photoshop 网页制作教程,喜欢的人非常多。今天这篇文章继续向大家分享更多优秀的 Photoshop 网页制作教程。其实,网页设计并没有你想的那么难,相信看完这些教程,你也可以制作出漂亮的网页。
946 0
20个优秀的 Photoshop 网页制作教程
  曾经和大分享过几篇优秀的 Photoshop 网页设计教程,喜欢的人非常多。今天这篇文章继续向大家分享最新20个优秀的 Photoshop 网页制作教程。其实,网页设计并没有你想的那么难,相信看完这些教程,你也可以设计出漂亮的网页。
966 0
+关注
awbeci
我的名字叫张威(多好听的名字啊),毕业于哈弗大学(之前和比尔&middot;盖次是同学,自从那家伙创立了威软,我和他的关系就不太好,我发誓要打败他,然后进入安徽机电职业技术学院学习软件技术,你们觉得我会成功么), 现在在一家世界五百强公司任职UFO(想问我是什么公司?叫合肥优尔电子科技有限公司
文章
问答
文章排行榜
最热
最新
相关电子书
更多
宏光S导航安装教程
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载