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

原创 2016年08月28日 22:25:18

效果展示


说明:

简单的来说就是当滚动条到达最顶部的时候。显示浅灰色的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所显示的效果了!

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

类似网易的顶部标题滚动条

  • 2016年01月19日 12:23
  • 243KB
  • 下载

js判断滚动条是否已到页面最底部或顶部实例-拓展(逐渐-自动下滑滚动)

/**以下是具体的html*/    /******************** * 取窗口滚动条高度  ******************/ functi...

高仿今日头条顶部渐变滚动条

  • 2015年02月26日 16:51
  • 2MB
  • 下载

左侧跟随滚动条浮动

  • 2014年08月06日 11:35
  • 201KB
  • 下载

固定顶部导航栏和左侧边栏滚动条为右下方的一类布局分析

在管理界面或者一些需要固定显示信息的界面,经常遇到这样的布局:顶部导航栏固定不动,左侧有一个侧边栏用来显示详细信息,右下侧为主要内容所在区域。如下图所示: 这是需要达到的目标效果。其中Heade...

导航随滚动条浮动

  • 2013年07月12日 09:34
  • 3KB
  • 下载

JS 滚动条定位 回到顶部 停在原来位置

滚动条停在原地:标签点击OnClick事件后,滚动条会回到顶部,如果让滚动条停在原来位置不动呢?只需要加上href=“###”,就可以了,滚动条就会停在原地不动了。 滚动条回到顶部:scrollto...

改变滚动条样式,适用于webkit内核的浏览器,平滑返回顶部功能实现

改变滚动条样式,适用于webkit内核的浏览器,平滑返回顶部功能实现 body{ background-color: #2a3542; color: #797979; overflow: ...

iOS 模仿腾讯新闻首页,指示条及顶部滚动条效果

// // ViewController.m // 腾讯新闻模仿 // // Created by Eva on 2017/7/7. // Copyright © 2017年 shanghai...

16-CSS区块、浮动、定位、溢出、滚动条

CSS中区块的使用 CSS中浮动的使用 CSS中定位的使用 1. CSS中区块的使用 属性名称 属性值 说明 width 像素或百分比 区块的宽度 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:基于滚动条是否到达顶部而浮动显示的页首索引Demo
举报原因:
原因补充:

(最多只允许输入30个字)