关闭

基于滚动条是否到达顶部而浮动显示的页首索引Demo

标签: Jquery
50人阅读 评论(0) 收藏 举报
分类:

效果展示


说明:

简单的来说就是当滚动条到达最顶部的时候。显示浅灰色的div,深灰色的div则位于其下方;当滚动条被拖动的时候,浅灰色的div消失,深灰色的div放大并固定在上方这样的效果。

实现思路


html结构设计

最外层的div是为了撑开body使得做出来的页面有滚动条;然后一个topBox会因为滚动条的滚动而消失,而indexBox则会随着滚动条的位置而有不同的位置和样式。
css中需要注意一下indexBox的样式是一开始打开页面的时候的样子。
顺便,因为是使用到了jquery,所以不要忘记在jsp的头里面加入jquery的链接。

.a{
    height:50px;
    width:100%;
    background-color:#ddd;
}
.b{
    height:70px;
    margin:20px 50px 20px 50px;
    background-color:#aaa;
}
<body>
    <div style="height:1500px;">
        <div id="topBox" class="a"></div>
        <div id="indexBox" class="b"></div>
    </div>
</body>

js

判断是否在顶端

这里采用了一般的方法使用了$(document).scrollTop()进行判断

$(function(){
    $(window).scroll(function() {
        //如果滚动条到达了顶端
        if ($(document).scrollTop() <= 0) {...}
        //如果滚动条离开了顶端
        else{...}
    });
});

修改div的css样式以及隐藏div

这里采用的是jquery的方法 eg:$("#a").css("width","auto");
需要注意的是每次离开顶端的时候css样式也要相应的会重新设置:

$(function(){
    $(window).scroll(function() {
        //如果滚动条到达了顶端
        if ($(document).scrollTop() <= 0) {
            $("#topBox").show();
            $("#indexBox").css("width","auto");
            $("#indexBox").css("margin","20px 50px 20px 50px");
            $("#indexBox").css("position","relative");
        }
        //如果滚动条离开了顶端
        else{
            $("#topBox").hide();
            $("#indexBox").css("width","100%");
            $("#indexBox").css("margin","0px");
            $("#indexBox").css("position","fixed");
        }
    });
});

这样就可以实现上方gif所显示的效果了!

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:488次
    • 积分:52
    • 等级:
    • 排名:千里之外
    • 原创:5篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档