滚动条事件—固定div(第一篇)

最近在弄公司的官网，产品经理要求的特效是从魅族官网、苹果官网、360官网与36Kr官网上而来！最开始的时候我是各种惧怕，这全都是些大公司的网站，技术要求肯定特别高，我能做出来吗？但后来研究着研究着就通了！嘿嘿！这种感觉很棒！不啰嗦了！说正题......

这里要讲得是苹果官网子页面也就是iPhone6 s的详细介绍界面里面的一个小效果：最上方有两个导航栏，第一个为整个网站的大导航栏，第二个为这个页面的小导航栏。

当滚动条像下滚动时，大导航栏不见，小导航栏就固定在最上方。

我最开始的思路是这样的：获取滚动条滚动的距离，减去大导航栏的高度，当这个值等于0或大于0时用js改变小导航栏的css样式。

但我最后的代码确是这样的（只是简单做个练习，不要计较美观）：

<style>

body{height: 2000px;}

.h1{height: 50px; width: 100%;background-color: #000000;}

.h2{height: 50px; width: 100%;background-color: red;}

</style>

<div class="h1"></div>

<div class="h2" id="hh"></div>

<script>

window.onscroll=function(){

//获取滚动条的垂直距离

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

var t=document.getElementById("hh");

if(h>=50){

t.style.position="fixed";

t.style.top="0";

}

if(h<50){

t.style.position="static";

t.style.top="50";

}

}

</script>

这里的思路是：直接获取滚动条距顶部的距离，大于等于大导航栏的高度时（滚动条向下滚动），小导航栏的position为fixed（固定）；当小于大导航栏的高度时（滚动条向上滚动），小导航栏的position值改为默认值static，取消固定。

我算个小菜鸟，只是记录一些自己遇到的效果，想不断成长而已！有错误的地方请大家指正，我自己发现后也会改的！嘿嘿.......