侧边栏点击页面滚动到相应位置
<style>
body {
margin: 0;
height: 1800px;
}
.header {
width: 1100px;
height: 300px;
background-color: skyblue;
}
.banner {
width: 1100px;
height: 500px;
background-color: yellow;
}
section {
width: 1100px;
height: 300px;
background-color: grey;
}
.main {
width: 1100px;
height: 800px;
background-color: #f9b47f;
}
.footer {
width: 1100px;
height: 200px;
background-color: orange;
}
.bar {
display: none;
position: fixed;
left: 1100px;
top: 200px;
height: 500px;
width: 80px;
}
div ul {
padding: 0;
}
div ul li {
list-style: none;
height: 80px;
width: 80px;
border: 1px solid #4c4c4c;
}
.hidden {
display: none;
}
</style>
<body>
<section>其他模块1</section>
<section>其他模块2</section>
<div class="w">
<div class="header">头部</div>
<div class="banner">导航栏</div>
<div class="main">主体</div>
<div class="footer">底端</div>
</div>
<div class="bar">
<ul>
<li style="background-color: pink">头部</li>
<li>导航栏</li>
<li>主体</li>
<li>底端</li>
<li class="back hidden">回到顶端</li>
</ul>
</div>
<script src="jqueryMin.js"></script>
<script>
//6、声明一个开关,保证点击li的时候不会出现滚动时li的背景色一个个移动的样子,但是点击事件结束时要有回调函数,把flag置为true
var flag = true;
//4、页面滚动到其他模块2的距离,才显示bar
var barDisplay = function () {
if ($(document).scrollTop() >= $("section").eq(1).offset().top) {
$(".bar").fadeIn();
} else {
$(".bar").fadeOut();
}
};
barDisplay();
$(window).scroll(function () {
barDisplay();
//5、页面滚动到对应的距离,对应的bar里的li变颜色。类似于被点击了
//聪明方法,用遍历
if (flag) {
$('.w div').each(function (i, ele) {
if ($(document).scrollTop() >= $(ele).offset().top) {
$(".bar li").eq(i).css("background", "pink").siblings('li').css("background", "#fff");
}
})
}
/*//笨方法,一个个数
if ($(document).scrollTop() >= $(".main").offset().top) {
$(".bar li").css("background", "#fff");
$(".bar li").eq(3).css("background", "pink");
} else if ($(document).scrollTop() >= $(".banner").offset().top) {
$(".bar li").css("background", "#fff");
$(".bar li").eq(2).css("background", "pink");
} else if ($(document).scrollTop() >= $(".header").offset().top) {
$(".bar li").css("background", "#fff");
$(".bar li").eq(1).css("background", "pink");
} else {
$(".bar li").css("background", "#fff");
$(".bar li").eq(0).css("background", "pink");
}*/
});
//1、点击bar里面的li,跳转到对应的那一栏
$(".bar li").click(function () {
flag = false;
$("body,html").animate({
scrollTop: $(".w div").eq($(this).index()).offset().top
}, function () {
flag = true;
});
$(this).css("background", "pink").siblings('li').css("background", "#fff");
});
//2、点击回到顶端,回到页面最上方
$(".back").click(function () {
$("body,html").animate({
scrollTop: 0
})
});
//3、超过一定距离,展示回到顶端按钮
$(window).scroll(function () {
if ($(document).scrollTop() >= $(".main").offset().top) {
$(".back").removeClass("hidden");
} else {
$(".back").addClass("hidden");
}
});
/*//原始代码写起来也太复杂了
var banner = document.querySelector('.banner');
var maxTop = banner.offsetTop;
console.log(maxTop);
box = document.querySelector('.bar');
var maxFix = box.offsetTop - banner.offsetTop;
var main = document.querySelector('.main');
var backTop = main.offsetTop;
var back = document.querySelector('.hidden');
var animateslow = function (obj, target, callback) {
clearInterval(obj.leaveslow);
obj.leaveslow = setInterval(function () {
if (window.pageYOffset == target) {
clearInterval(obj.leaveslow);
callback();
}
//保证盒子能走到目标位置,需要判断正负
var step = (target - window.pageYOffset) / 20 > 0 ? Math.ceil((target - window.pageYOffset) / 20) : Math.floor((target - window.pageYOffset) / 20);
console.log(step);
scroll(0, window.pageYOffset + step);
}, 15);
}
//滚动到一定距离时,出现回到顶端按钮
document.addEventListener('scroll', function () {
if (window.pageYOffset >= maxTop) {
box.style.position = 'fixed';
box.style.top = maxFix + 'px';
if (window.pageYOffset >= backTop) {
back.className = '';
} else {
back.className = 'hidden';
}
} else {
box.style.position = 'absolute';
box.style.top = '500px';
}
})
back.addEventListener('click', function () {
animateslow(window, 0);
});*/
</script>
</body>