<style>
.slider-bar {
position: absolute;
left: 50%;
top: 300px;
margin-left: 600px;
width: 45px;
height: 130px;
background-color:skyblue;
}
.w {
width: 1200px;
margin: 10px auto;
}
.header {
height: 150px;
background-color: purple;
}
.banner {
height: 250px;
background-color: skyblue;
}
.main {
height: 1000px;
background-color: yellowgreen;
}
span {
display: none;
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<div class="slider-bar">
<span class="goBack">返回顶部</span>
</div>
<div class="header w">头部区域</div>
<div class="banner w">banner区域</div>
<div class="main w">主体部分</div>
<script>
/*
案例需求：
1：右侧边导航栏，原先会随着页面一起滚动，既为，绝对定位；
2：当页面滚动到一定 content (内容)区域的时候，让右侧边栏改为固定定位，既固定效果
3：当右侧边栏变为固定效果，不在跟随页面内容一起滚动的时候，显示。返回顶部，这个盒子
4：当点击返回顶部按钮 ，页面回到初始部位的content 的时候。在隐藏 返回顶部盒子；
*/
/*
案例技术（知识点）：
1：需要了解，scroll 属性
元素名.scrollTop 返回的是：上侧边距离。数值是不带单位的，
元素名.scrollleft 返回的是：左侧边距离。数值也是不带单位的，
元素名.scrollWidth 返回的是：自身实际宽度，不包含边框，返回的是值也是不带单位的，
元素名.scrollHeight 返回的是：自身实际高度，不包含边框，返回的是值也是不带单位的，
/*
案例分析：
1：需要用到页面滚动事件，scroll 因为是页面滚动，所以事件源是 document
{每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。}
2:滚动到某个位置，就是判断被卷去的上部值，scrollTop
3:页面被卷去的头部，可以通过window.pageYOffset获得，如果被卷去的是左侧：window.pageXOffset
4:注意，元素中被卷去的头部是：（元素名）element.scriptllTop(这里方向 Top.首字母一定要大写)
5：其实这个值，可以通过盒子的offsetTop 可以得到，如果大于等于这个值， 就可以让盒子固定定位了
{offset 偏移量，是个只读属性，以像素为单位，只能读取，不能获取和赋值}
*/
//获取右侧边栏的元素
var bar = document.querySelector('.slider-bar');
//banner 部分的元素
var banner = document.querySelector('.banner');
var goBack = document.querySelector('.goBack');
//给页面添加定位事件，事件源是 document
document.addEventListener("scroll", function() {
//1:判断，页面是否滚动到，我们需要出现效果的内容部分
//当页面滚动到 = banner部分的时，
if (window.pageYOffset >= banner.offsetTop) {
//右侧边栏导航栏 改为固定，定位
bar.style.position = "fixed";
//右侧导航栏的top，样式， = 右侧导航栏top值 - 要滚动到内容区域的top值；
//如果不加这一步，就会出现右侧导航栏，突然跳到固定内容区的情况，
bar.style.top = bar - bannerTop.offsetTop + 'px';
} else {
//如果，页面没有滚动到banner ，content内容区域，右侧导航栏的样式，依然是绝对定位
bar.style.position = "absotion";
//如果没有滚动到指定区域，右侧导航栏的位置，依然是初始值。
bar.style.top = "300px";
}
//如果页面滚动到main 位置区域，
if (window.pageYOffset >= main.offsetTop) {
// 就显示 右侧导航栏里面的文字部分
goBack.style.display = "block";
} else {
//否则，就不显示，隐藏该盒子
goBack.style.display = "none";
}
})
</script>
