项目实战JS之滚动条

实战背景：

       学了BS好几个月了，神马新闻系统、HTML、CSS。。。直到JS，这一路走来，有点蒙圈的感觉。俗话说：实践检验真理，我有幸参加了某网站的维护工作。

需求简介：

       简单介绍一下这次维护工作的任务1：
         在这个页面中，我需要做的任务2是：
         
    我从用户的角度来考虑，是这样的：初次打开这个页面是，只能看到功能B的一部分。然而用户想去点击功能B时，必定需要向下滚动，这时我让功能A收缩，这样用户立马就能看见功能B和功能C了；当用户浏览content后，滚动条向下移动了很多，已经看不见功能列表了，这样用户必定有向上滚动的想法，我就让页面在用户向上滚动时，立马把功能列表中所有功能块展开，方便用户随时跳转到其他页面。

项目分析：

在功能列表中显示：

      HTML+CSS：用ul和li标签来完成，其中css用到了盒子模型。回顾一下盒子模型：
     
滚动条事件：
       检测滚动条滚动的事件是什么？
       $(window).scroll();
        如何检测鼠标是向上滚动还是向下滚动？
    var falg;
    var oldScrollTop=0;
    $(window).scroll(function () {
        var myul = document.getElementById("myTest");
        var scrollTop = document.body.scrollTop;
        if (scrollTop < 60) {
            myul.style.cssText = "display:block;margin:0px;padding:5px;";
        }
        //如果滚动条正在向下滚动
        if ((scrollTop - oldScrollTop) > 0) {
            if (scrollTop > 60 & scrollTop < 160 & falg != "UpF") {
                falg = "UpF"
                oldScrollTop = scrollTop;
                myul.style.cssText = "display:none;"
            }
        } else if ((scrollTop - oldScrollTop) < 0) {
            if (scrollTop > 60 & scrollTop < 160 & falg != "DownT") {
                falg = "DownT"
                oldScrollTop = scrollTop;
                myul.style.cssText = "display:block;margin:0px;padding:5px;";
            }
        }
    });