sideBar 楼层跳跃导航栏

body部分

<div class="sideBar"><div class="sideBar-list"><div class="sideBar-item">直播</div><div class="sideBar-item">动画</div><div class="sideBar-item">番剧</div><div class="sideBar-item">音乐</div><div class="sideBar-item">舞蹈</div><div class="sideBar-item">国创</div></div><div class="sideBar-line"></div><div class="sideBar-goUp"></div>
</div>

Jquery部分

$(function (){$(".sideBar-item").click(function (){$(this).addClass("current").siblings().removeClass("current");var index = $(this).index();console.log(index);var offset = $(".headLine").eq(index).offset().top;$("html,body").animate({scrollTop: offset},1000);});$(window).scroll(function (){var $winOffset = $(window).scrollTop();var $winHeight = $(window).height();$(".headLine").each(function (index,ele){var floorOffset = $(ele).offset().top;var floorHeight = $(ele).height();if($winOffset-floorOffset >= floorHeight/2){$(".sideBar-item").eq(index).addClass("current").siblings().removeClass("current");}});var height = $('.headLine').eq(0).offset().top;if(height>$winOffset){$(".sideBar").css("top","50%");}else {$(".sideBar").css("top","10%");}});$('.sideBar-goUp').click(function(){$("html,body").animate({scrollTop: 0},1000);})
})

CSS部分

/*sideBar*/
.sideBar {position: fixed;right: 5%;top: 50%;width: 50px;height: 100%;transition: all 0.3s;text-align: center;
}
.sideBar-list {position: relative;width: 48px;background-color: #f6f9fa;border: 1px solid #e5e9ef;border-radius: 4px;
}
.sideBar-item {position: relative;display: inline-block;width: 48px;height: 32px;line-height: 32px;text-align: center;transition: background-color .3s,color .3s;cursor: pointer;
}
.sideBar-item:hover {background-color:#00a1d6;color: #fff;
}
.current{background-color:#00a1d6;color: #fff;
}
.sideBar-line {height: 9px;width: 30px;margin: 0 auto;border-left: 1px solid #ddd;border-right: 1px solid #ddd;
}
.sideBar-goUp {height: 48px;background: url(../images/icons.png) -648px -72px no-repeat;background-color: #f6f9fa;border: 1px solid #e5e9ef;border-radius: 4px;cursor: pointer;
}
.sideBar-goUp:hover {background-color:#00a1d6;background-position: -714px -72px;
}

sideBar 楼层跳跃导航栏相关推荐

小程序模拟今日头条导航栏，点击锚点跳转对应楼层
使用场景,顶部导航的个数不确定,会有超出屏幕的情况,在一行展示,每点击一个导航的tab会判断是否向左或者像右滚动一个距离,以使当前的点击的导航能看到.同时点击导航会锚点跳转对应楼层,当前导航会变为激活 ...
vue简易楼层跳跃（vue-scrollto）
突发奇想做一个基于vue的一个楼层跳跃,之前用js做过,但是想着说vue应该能做出更为便利的方法,上网查询了一下,发现了一个很方便的插件 vue-scrollto. 使用方法就不在这里多说了,链接里 ...
vue项目中处理左侧导航栏问题的分享
2019独角兽企业重金招聘Python工程师标准>>> 相信左侧导航栏大家都不陌生,几乎每个项目都会存在.以前用jquery做的时候,某些本不是什么问题的地方就突然变成阻碍了.下面就 ...
SpringBoot代码复用——thymeleaf提取导航栏并插入或替换元素
文章目录创建通用文件commons 提取导航栏 1.找到导航栏所在代码块 2.把导航栏的前端代码块移入commons并命名 3.在各个有需求的html文件中使用导航栏组件创建通用文件commons ...
php主题怎么增加导航页,教你如何给wordpress主题添加导航栏
烈火建站学院转载不是所有的wordpress主题都自带导航栏的,我早就想自行添加一个.昨天的标题前有"GOOGLE是个好老师"这个句子,今早赶紧删了,倒不是不认同,而是觉得在添加 ...
jQuery 设计和自定义一个带展开动画效果的导航栏
设计和自定义一个带展开动画效果的导航栏,尝试写了一个demo,加上设计和调试差不多写了一天吧. 这里就来讲讲如何从设计->写布局->写样式->写JS代码完成一个完全自己设计的导航栏 ...
html设置nav标签高度,html – Bootstrap带导航栏的100％高度
你必须从100%减去导航栏的高度.有几种解决方案,其中许多将包括JavaScript,但您不需要. 1:盒子大小给导航栏一个绝对的位置.那么你有其他元素的内容在它下面消失的问题. 接下来是下一个诀窍 ...
css+div实现导航栏
css+div实现导航栏把页面分成两个部分,用div装起来 <body><div class="one1"><h1>SYROS</h1& ...
Android 通讯录导航栏
这几天无意间翻到之前写的一篇关于自定义通讯录导航栏的博客,文章中只是做了一点点简单介绍,写的并不完整.由于这段时间比较空闲,索性把整篇文章重新整理一遍. 这样的一个控件实现起来不难,需要对自定义vie ...

sideBar 楼层跳跃导航栏

sideBar 楼层跳跃导航栏相关推荐

最新文章

热门文章