网页组件制作之固定边栏滚动特效

在该笔记中将学到列表展示中固定边栏滚动特效的方法与展示效果

本系列的是参考慕课网远人老师的视频，仅供个人查阅使用，具体讲解推荐参考视频。

实现的效果

如果页面是多栏布局，并且多个栏的高度不一致，在滚动的时候，高度高的栏可以继续滚动，高度低的栏在完成滚动后只能显示空白页面。我们要实现的效果是，如果滚动的范围超出高度低的边栏，则高度低的边栏就停在页面的两侧，而不是滚动到空白页面。

没有设置固定边栏的效果：

设置了固定边栏的效果：

技术关键点

position:fixed
监听 window 的滚动事件
设置 position:fixed 的条件判断：滚动高度 + 屏幕高度 > 边栏高度

几个关于 Height的总结

offsetHeight、offsetWidth表示的是元素在垂直(水平)方向上所占用的空间的大小，包括边框+内边距+内容

clientWidth、clientHeight表示的是元素内容在垂直(水平)方向上所占用的空间的大小，包括内边距+内容

scrollWidth、scrollHeight表示的是包含滚动隐藏的内容元素在垂直(水平)方向上所占用的空间的大小

窗口大小：(outerWidth、outerHeight、innerWidth、innerHeight)

在获得屏幕显示区域的高度的时候，在 chrome 下使用 $(window).height() 没有得到显示区域的高度，得到的是 HTML 文档的高度，但是宽度获得没有问题。在 IE 下使用上述方法可以正确获得显示区域的高度。所以解决方法是使用原生 JavaScript 的 window.innerHeight 获得的高度。

<html>
    <head>
        <title>固定侧边栏滚动特效</title>
        <meta charset="utf-8">
        <style>
            body{margin: 0; padding: 0;}
            #left{width: 39%; float: left;height: 1800px;background: linear-gradient(red, blue);}
            #right{width: 60%; position: absolute;top: 0; right: 0;height: 1000px;background: linear-gradient(blue, green);}
        </style>
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.js"></script>
        <script>
            $(document).ready(function () {
            $(window).bind("scroll", function (e) {
                let screenHeight = window.innerHeight, scrollHeight = $(window).scrollTop(), sidebarHeight = document.getElementById("right").clientHeight;
                console.log(screenHeight + " " + scrollHeight + " " + sidebarHeight);
                if(screenHeight + scrollHeight > sidebarHeight) {
                    $("#right").css({
                        "position" : "fixed",
                        "top" : -(sidebarHeight - screenHeight)
                    })
                } else  {
                    $("#right").css({
                        "position":"absolute",
                        "top" : 0
                    })
                }
            });
        });
        </script>
    </head>
    <body>
        <div id="left">

        </div>
        <div id="right">

        </div>
    </body>
</html>