html侧边导航栏跟随页面滚动,页面滚动时,右侧导航栏跟着对应滚动
页面滚动时,右侧导航栏跟着对应滚动
方法一:
导航栏对应跳转
*{ margin:0px; padding:0px; text-align:center; color:#fff; font-size:20px;}
.part1{height:544px; background:#f44336;}
.part2{height:655px; background:#ff9800;}
.part3{height:557px; background:#ffeb3b;}
.part4{height:677px; background:#8bc34a;}
.part5{height:577px; background:#03a9f4;}
.part6{height:1098px; background:#3f51b5;}
.part7{height:821px; background:#673ab7;}
.sidebar {display: none; position: fixed; top:50%; right: 60px; z-index: 100; width:100px; height:416px; margin-top:-208px; overflow: hidden;}
.on{ display:block; }
.sidebar a{ width:100px; height:30px; line-height:30px; background:red; color:#fff; display:block; font-size:14px;}
.sidebar a.on{ background:pink; }
1111
2222
3333
4444
5555
6666
7777
TOP
var cimi = {
//初始执行一次
init: function () {
cimi.navBar();
},
navBar: function(){
var pos=[],
$page = $('.part'),
$nav = $(".tz-box a");
for(var i=0;i
pos[i] = $page.eq(i).offset().top;
}
$nav.click(function () {
var index = $(this).index(),
scrolltop = 0;
scrolltop = pos[index];
$("html,body").stop().animate({
scrollTop: scrolltop
}, 500);
});
$('#top').click(function () {
scrolltop = 0;
$("html,body").stop().animate({
scrollTop: scrolltop
}, 500);
});
$(window).scroll(function(){
var top = $(document).scrollTop();
if(top >= 300){
$('.sidebar').addClass("on");
}else{
$('.sidebar').removeClass("on");
}
for(var i=0;i
if(top > (pos[i] - 10)){
$nav.eq(i).addClass("on").siblings().removeClass("on");
}
}
}).trigger("scroll");
},
};
cimi.init();
方法二:
导航栏对应跳转
*{ margin:0px; padding:0px; text-align:center; color:#fff; font-size:20px;}
.part1{height:544px; background:#f44336;}
.part2{height:655px; background:#ff9800;}
.part3{height:557px; background:#ffeb3b;}
.part4{height:677px; background:#8bc34a;}
.part5{height:577px; background:#03a9f4;}
.part6{height:1098px; background:#3f51b5;}
.part7{height:821px; background:#673ab7;}
.part8{height:821px; background:#ff5722;}
.sidebar {display: none; position: fixed; top:50%; right: 60px; z-index: 100; width:100px; height:416px; margin-top:-208px; overflow: hidden;}
.sidebar a{ width:100px; height:30px; line-height:30px; background:#cddc39; color:#fff; display:block; font-size:14px;}
.sidebar a.current{ background:pink; }
22222
333333
4444
5555
66666
777777
TOP
$(function() {
// 初始化侧导航
function initSidebar() {
var _screenWidth = window.innerWidth;
if (_screenWidth > 1340 && _screenWidth <= 1500) {
// 缩小并显示导航
$('.sidebar').addClass('small');
}
$(window).scroll(function(){
var sTop=document.documentElement.scrollTop || document.body.scrollTop;
if(sTop<130){
$('.sidebar').fadeOut();
}else{
$('.sidebar').fadeIn();
}
if ( sTop >= 544 && sTop < 1199) {
cc(0);
}
if (sTop >= 1199 && sTop < 1756) {
cc(1);
}
if (sTop >= 1756 && sTop < 2433 ) {
cc(2);
}
if (sTop >= 2433 && sTop < 3010 ) {
cc(3);
}
if (sTop >= 3010 && sTop < 4108 ) {
cc(4);
}
if ( sTop >=4108 ) {
cc(5);
}
});
function cc(nums){
$(".sidebar-inner a").eq(nums).addClass('current').siblings().removeClass('current');
}
}
initSidebar();
// 点击侧导航
$('.sidebar,.htext').on('click', 'a', function() {
var $el = $(this);
if (($el).hasClass('to-top')) {
$('html, body').stop().animate({scrollTop: 0}, 600);
} else {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html, body').stop().animate({
scrollTop: targetOffset
}, 600);
return false;
}
}
});
})
html侧边导航栏跟随页面滚动,页面滚动时,右侧导航栏跟着对应滚动相关推荐
- [html] 写一个布局,当页面滚动一定高时,导航始终固定在顶部,反之恢复原位
[html] 写一个布局,当页面滚动一定高时,导航始终固定在顶部,反之恢复原位 使用粘性定位,position:sticky 记得使用的时候父元素不能使用overflow:hidden和overflo ...
- [html] 写一个布局,当页面滚动一定高时,导航始终固定在顶部,反之恢复原位
[html] 写一个布局,当页面滚动一定高时,导航始终固定在顶部,反之恢复原位 使用粘性定位,position:sticky 记得使用的时候父元素不能使用overflow:hidden和overflo ...
- css 侧栏跟随_如何实现博客的侧栏跟随(滚动条)效果
现在许多web2.0风格的网站都喜欢用"侧栏跟随"的效果,就是当一个页面很长的时候,设定侧栏内容会跟随滚动条,这种效果适用于评论较多.内容较长的网站. 这种特效对提高网站浏览量.文 ...
- 如何设置页脚跟随页面滚动 高度不够时固定在底部
在开发PC页面的时候 我们经常遇到底部栏要自适应页面,页面内容少的时候要固定在底部,内容超出的时候要跟随页面滚动.这里介绍一个比较容易的方法只需设置页面内容最小高度min-height比如min-he ...
- 每日分享html特效篇1个侧边栏菜单+2个导航栏+1个登录页面+6个加载
我是c站的一个小博主L_ar,近期我会每天分享前端知识包括(原生的web语句,以及vue2和vue3,微信小程序的写法及知识点)本篇文章收录于html特效专栏中,如果想每天在我这学到一些东西,请关注我 ...
- 滚动页面一定距离后固定导航条
需求:滚动页面到一定距离后,页面中间的导航条固定到页面的某个位置不动,滚回去时会复原. document.addEventListener('scroll', function (event) { v ...
- 源生实现滚动页面显示悬浮导航
很多网页中都有当我们滚动页面到一定的高度时就会显示悬浮导航,这个效果用jquery实现很简单,只要用 slideDown( )实现,今天主要分享源生JS实现这个效果: HTML代码: <head ...
- 滚动页面显示悬浮导航
代码: <html><head><title>滚动页面显示悬浮导航</title><style>*{margin:0;padding:0;} ...
- 如何去掉微信小程序导航栏,以及禁止页面滑动
如何去掉微信小程序导航栏,以及禁止页面滑动 1.微信小程序要去掉微信自带的导航栏,只需要在app.json中加上 "navigationStyle": "custom&q ...
最新文章
- 计算机 采购,计算机采购
- 计算机网络数据容量100M,华工网络教育计算机网络作业及答案
- union all怎么用在循环里_欧式边框在PPT里怎么用?我怎么好像没见过
- 我曾经得到的一个最好的编程建议
- python变量和运算符
- 在 VS 类库项目中 Add Service References 和 Add Web References 的区别
- 特斯拉标准续航版Model Y为什么下架?马斯克这么回答
- 微信小程序API之showModal(Loding...)
- mysql 数据导出语句_MySQL 数据导出
- OSPF开销值、协议优先级及计时器的修改
- 使用pyspider爬取巨量淘宝MM图片 1
- 花好明月夜,美和易思祝您元宵节快乐!
- [动态树] HDOJ 5467 Clarke and hunger games
- 如何快速搭建好看的个人博客(完整配置与源码)
- 十年生死两茫茫,当我们已不再年轻——焦版小李飞刀
- SSM+图书馆电子文件资源管理 毕业设计-附源码191614
- windows Outlook邮箱无法连接服务器
- GitHub:图像分类/目标检测资料
- 知乎1w视频播放能赚多钱?今天来大揭秘
- Tesla Autopilot技术架构整理(引用自EatElephant)