滚动条在内容页翻页到指定ID时显示最下方浮动DIV层的特效

稿源：互联网 2018-09-02 22:42:01 点击： 11743 撤稿纠错

以下讨论的是和滚动条翻页浮动相关的滚动条在内容页翻页到指定ID时显示最下方浮动DIV层的特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="gbk"/>
<title>New page</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<link rel="bookmark" type="image/x-icon" href="favicon.ico"/>
<link rel="stylesheet" type="text/css" href=""/>
<script type="text/javascript" src="http://www.alixixi.com/script/jquery-1.8.3.min.js"></script>
<style type="text/css">
/* `Grid */
.grid {
    margin-left: auto;
    margin-right: auto;
    width: 1200px;
}
/* `Grid >> Global */
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
    display: inline;
    float: left;
    margin-left: 5px;
    margin-right: 5px;
}
/* `Grid >> 12 Columns */
.grid .grid_1 {
    width: 90px;
}

.grid .grid_2 {
    width: 190px;
}

.grid .grid_3 {
    width: 290px;
}

.grid .grid_4 {
    width: 390px;
}

.grid .grid_5 {
    width: 490px;
}

.grid .grid_6 {
    width: 590px;
}

.grid .grid_7 {
    width: 690px;
}

.grid .grid_8 {
    width: 790px;
}

.grid .grid_9 {
    width: 890px;
}

.grid .grid_10 {
    width: 990px;
}

.grid .grid_11 {
    width: 1090px;
}

.grid .grid_12 {
    width: 1190px;
}
/*Grid End*/
.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

.clearfix:before,
.clearfix:after,
.grid:before,
.grid:after {
    content: '.';
    display: block;
    overflow: hidden;
    visibility: hidden;
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0;
}

.clearfix:after,
.grid:after {
    clear: both;
}

.clearfix,
.grid {
    zoom: 1;
}
body{background-color: #369;}



/*以上的CSS不用理会*/

* {
    _background-image: url('about:blank');
    _background-attachment: fixed;
}

.footer-bar {
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 120px;
    background-color: #f1f1f1;
    border-top: #ddd 1px solid;
    position: fixed;
    z-index: 9998;
    _bottom: auto;
    _position: absolute;
    _top: expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);
}
</style>

</head>
<body>
<p>占位符
<p>占位符
<p>占位符
<p>占位符
<p>占位符
<p>占位符
<p>占位符
<p>占位符
<p>占位符
<p>占位符
<p>占位符
<p>占位符
<p>占位符
<p>占位符
<p>占位符
<p>占位符
<p>占位符
<p>占位符
<p>占位符
<p>占位符
<p>占位符
<p>占位符
<p>占位符
<p>占位符
<p class="footer">欢迎访问阿里西西网页特效代码！http://js.alixixi.com
<p>占位符
<p>占位符
<p>占位符
<p>占位符
<p>占位符
<p>占位符
<p>占位符
<p>占位符
<p>占位符
<p>占位符

<div class="footer-bar">
<div class="grid">
<div class="grid_12">
底部工具条
</div>
</div>
</div>
<script type="text/javascript">

$(function(){
$('.footer-bar').hide(0);
$(window).scroll(function(){
var scrollId = $('.footer').offset().top - $(window).height();
if ($(window).scrollTop() > scrollId)
$('.footer-bar').slideDown('slow');
else
$('.footer-bar').slideUp('slow');
});
});
//-->
</script>
</body>
</html>

关于滚动条在内容页翻页到指定ID时显示最下方浮动DIV层的特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018090295426.shtml方便下次再访问哦。

·上一篇： 简单实用的纯CSS实现的横向多级导航特效代码
·下一篇： 用JQUERY实现的吹泡泡js特效代码自己替换泡泡图效果更完美

滚动条在内容页翻页到指定ID时显示最下方浮动DIV层的特效

文章分类LIST >>返回首页

最新游戏

最新新闻