固定边栏滚动特效

作者: 爱忽悠的唐唐在晃悠 | 来源:发表于2018-03-30 09:04 被阅读5次

固定边栏滚动特效
京东移动端初体验
iOS新浪新闻首页卡片滚动特效实现浅谈
JS各种实用的效果（合集）
iOS常用第三方推荐-UI篇(2)
使用JavaScript实现网页title滚动特效
新浪微博个人主页效果实现
用这5个技巧在网页设计中玩转视差特效
关于侧边栏滚动导航事件
js网页特效-2

知识点

用fixed布局
当滚动高度+屏幕高度>边栏高度时，边栏改变top值。

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link rel="stylesheet" type="text/css" href="css/reset.css"/>
        <style type="text/css">
            .left-area{
                height:2500px;
                background:black;
                float:left;
                width:65%;
            }
            .child1{
                background: gray;
                height:60%
            }
            .child2{
                background: goldenrod;
                height:40%;
            }
            .fix-area{
                height:2000px;
                background: red;
                left: 65%;
                top:0;
                width:35%;
                position:fixed;
            }
            
        </style>
    </head>
    <body>
        <div class="left-area clear">
            <div class="child1"></div>
            <div class="child2"></div>
        </div>
        <div class="fix-area" id="side">
            <div class="child2"></div>
            <div class="child1"></div>
        </div>
        <script type="text/javascript">
                var addEvent = function(obj,event,fn){
                if(obj.addEventListener){
                    obj.addEventListener(event,fn,false);
                }else if(obj.attachEvent){
                    obj.attachEvent('on'+event,fn);
                }
            }
        
            addEvent(window,'scroll',function(){
                var sideE= document.getElementById("side")
                var sideHeight =sideE.offsetHeight;
                var scrollHeight = document.documentElement.scrollTop||document.body.scrollTop;
                var screenHeight =document.documentElement.clientHeight||document.body.clientHeight;
                if(screenHeight+scrollHeight>sideHeight){
                    sideE.style.top= -(screenHeight+scrollHeight-sideHeight)+'px';
                }
            })
        </script>
    </body>
</html>