7C00.ME/houmu 2013-06-18

Html Dingbuguding

Title:滑动至顶部固定的效果之实现 Date: 2013-06-18 22:03

页面中的元素(如导航栏、工具栏)在页面向下滚动使得它到可视范围之外时滑动至顶部固定的效果比较常见。今天在网上搜索了相关文章,学会了这种效果的一种实现方案。

实现的基本原理是监听窗口对象的scroll事件(重写window.onscroll函数),判断scroll到的位置(document.body.scrollTop)与临界值(通常和需要固定的元素起始位置有关)的大小关系,据此设定需要固定元素的display属性(一般情况下,使用static或者relative;而固定在窗口顶部则为fixed)。

主要代码如下:

<!doctype html>
<html>
<style>
body {margin: 0;}
div { padding: .5em; }
#header {background: #eee; }
#nav { background: #ccc; top: 0;right:0;left:0; }
#article { background: #ddd; height: 1000px; }
</style>

<div id="header">here is #header</div>
<div id="nav">here is #nav</div>
<div id="article">here is #article</div>

<script>
window.onload = function(){
    var nav = document.querySelector("#nav");
    var navOffsetTop = nav.offsetTop;
    window.onscroll = function() {
        var scrollTop = document.body.scrollTop;
        if(scrollTop < navOffsetTop){
            nav.style.position = "static";
        }else{
            nav.style.position = "fixed";
        }
    }
}
</script>
</html>

参考文章:http://www.cnblogs.com/yjzhu/archive/2013/01/18/2866782.html