基于滚动条是否到达顶部而浮动显示的页首索引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所显示的效果了!

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

jquery判断滚动条是否到达窗口顶部和底部

var doc_height = $(document).height(); var scroll_top = $(document).scrollTop();  var window_heigh...
  • haojie5
  • haojie5
  • 2012年10月17日 22:24
  • 4988

js 判断滚动条是否到达底部

1. 原生Javascript实现判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop、clientHeight、scrollHeight。 scrollTop : 滚动条在Y轴上的滚...
  • qq_21460229
  • qq_21460229
  • 2017年04月27日 20:18
  • 785

js判断滚动条是否到达顶部、底部 兼容各种浏览器

iScroll demo: simple      window.onscroll=function(){ test(); } function test(){ var ...
  • lijun2247900158
  • lijun2247900158
  • 2015年05月12日 18:00
  • 2896

js实现表头悬浮

在网上看到很多表头悬浮的代码,发现都无法使用。要么太冗长,要么不够通用。自己研究思路写了一个简洁的表头悬浮代码,放在哪里都可以运用。    思路:    表头悬浮指 当页面滚动条往下拉,当拉到看不到表...
  • huanghanqian
  • huanghanqian
  • 2016年09月26日 14:55
  • 1909

滚动页面时DIV到达顶部时固定在顶部(jq实现)

.NET Javascript jQuery C# 其他 首页 $(function () { var ie6 = document.all; var dv = $('#fixedMenu_k...
  • sqfbeijing
  • sqfbeijing
  • 2015年07月02日 19:39
  • 1196

jquery判断滚动条到达底部的方法

jquery scrollTop document.height():px;window.height():px;距离顶部0px $(function()...
  • wuzhe128520
  • wuzhe128520
  • 2015年11月06日 16:51
  • 724

jquery判断某个元素是否到了浏览器顶部 滚定监听

$(window).scroll(function() { var top1 = $('#table').offset().top; var gun = $(docum...
  • aa97257540
  • aa97257540
  • 2017年02月24日 16:52
  • 1319

不用扩展让 Chrome 一键回到页面最顶端

不用扩展让 Chrome 一键回到页面最顶端 这个技巧既简单又实用。首先右键点击地址栏下方的书签栏(如果没有的话按Ctrl+Shift+B打开,Mac是Command+Shift+B),然后...
  • jaray
  • jaray
  • 2014年06月30日 10:13
  • 818

初次进入页面ScrollView的滚动条不在顶部的解决办法

当加载数据完成后,ScrollView的内容会很多,滚动条会滚动,这样会ScrollView的第一个Child显示不全,这样造成不好的用户体验, 此时有两个解决办法: (1)加载数据完成后,延时设...
  • lue2009
  • lue2009
  • 2015年05月04日 16:18
  • 1387

判断滚动条是否到达底部事件

首先理解三个dom元素,分别是:clientHeight、offsetHeight、scrollTop。clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那个...
  • Vincent_xy
  • Vincent_xy
  • 2016年12月07日 17:22
  • 632
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:基于滚动条是否到达顶部而浮动显示的页首索引Demo
举报原因:
原因补充:

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