项目实战JS之滚动条

时间：2015-08-10 00:28:35 阅读：167 评论：0 收藏：0 [点我收藏+]

标签：javascript

实战背景：

学了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;";
            }
        }
    });

项目实战JS之滚动条

标签：javascript

原文地址：http://blog.csdn.net/cxl0921/article/details/47380539

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行