最近在弄公司的官网,产品经理要求的特效是从魅族官网、苹果官网、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.οnscrοll=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,取消固定。
我算个小菜鸟,只是记录一些自己遇到的效果,想不断成长而已!有错误的地方请大家指正,我自己发现后也会改的!嘿嘿.......