前端

随着页面的滚动导航条跟着滚动

2019-07-29  本文已影响0人  exertmyself

1、了解offsetTop,offsetHeight方面的知识点;

1) clientHeight,scrollHeight,offsetHeight 

    a) clientHeight:可理解为内部可视区高度,样式的height + 上下padding

    b)scrollHeight: 内容的实际高度 + 上下 padding(如果没有限制div的height,即height是自适应的,一般是scrollHeight == clientHeight)

   c) offsetHeight: 可理解为div的可视高度,样式的height +上下padding + 上下border-width;

2)clientTop,scrollTop,offsetTop

    a)clientTop: 容器内部相对于容器本身的top偏移,实际上就是border-width;

    b)scrollTop : Y轴的滚动条没有,或滚到最上时,是0;y轴的滚动条滚到最下时是scrollHeight-clientHeight

    c)offsetTop:容器到其包含块顶部的距离,粗略的说可以理解为其父元素。

2、scrollTop.scrollHeight,onscroll    

    a)onscroll 当元素的滚动条滚动时触发的事件;

    b)scrollTop 元素滚动条内的顶部隐藏部分的高度;(只有DOM元素才有,window/document没有)。

获取整个文档scrollTop,IE是document.documentElement.scrollTop,FF/CH是document.body.scrollTop;

    c)scrollHeight 元素滚动条内的内容高度;与scrollTop元素一样,只在DOM里使用;它只读,不可设置。

IE/FF/CH都可以通过document.documentElement.scrollHeight或document.body.scrollHeight;

代码附上:

html部分:

<ul id="smalldaohang">

      <a href="#introduce1" class="one"><li>Introduce</li></a>

      <a href="#protfolio1"><li>Protfolio</li></a>

      <a href="#contact1"><li>contact</li></a>

 </ul>

 <div id="blue"></div>

<div id="content">

    <div></div>

    <div></div>

    <div></div>

</div>

css部分:(我这里只放了主要css样式)

.one {

border-bottom: 5px solid white;

}

.cur {

border-bottom: 0;

}

#blue {

z-index: 1;

height: 3px;

background-color: #64b5f6;

border-radius: 15px;

position: fixed;

top: 50px;

box-shadow:2px 1px 3px black;

}

js部分:

//白色底部边框区域的变化

var smalldaohang = document.getElementById("smalldaohang");

var content = document.getElementById("content");

var smalldaohangChild = smalldaohang.children;

var contentChild = content.children;

var a = daohang.offsetHeight;

var d = content.offsetTop - a;

window.onscroll = function() {

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

for(var i=0;i<smalldaohangChild.length;i++) {

if(scrollTop - d >=contentChild[i].offsetTop){         //这里根据自己的需要可以自己调节;

for(var j=0;j<smalldaohangChild.length;j++) {

smalldaohangChild[j].className="cur";

}

smalldaohangChild[i].className="one";

}

}

//蓝色横条的变化

var height2 = 1129;                      //页面的总高度-最后滚动条所在页面的高度;

var blue = document.getElementById("blue");

blue.style.width = parseFloat(scrollTop / height2) * 1519.2 +"px";         //1519.2指的是蓝色横条的最终宽度;

}

终于做出来啦 开森~ 哈哈哈 (其实呢,这个不难,主要重在理解所代表的高度,宽度,以及上面我所陈列的知识点 ,就可以啦~)

上一篇下一篇

猜你喜欢

热点阅读