零基础建站培训介绍

当前位置:

制作div滚动到顶部固定不滚动特效

我们在自己建网站时,由于网站版面幅度的限制,我们之前讲制作大型门户网站鼠标移动tab切换栏目,今天我们讲另一种突破网页限制的特效- div滚动到顶部固定不滚动特效

div滚动到顶部固定不滚动特效可以让我们想把一个重要的内容总是让用户一眼看到。例如我们自己网站发布的最新文章,不管用户怎么拖动电脑的下拉条,它总是显示在屏幕顶端,如下图。

制作div滚动到顶部固定不滚动特效

我们自己做网站时怎么能做出这样一种div滚动到顶部固定不滚动的效果呢?下面就来列出做出这种div滚动到顶部固定不滚动的所有代码。

制作出的效果如下:

固定区域到顶部之前制作div滚动到顶部固定不滚动特效

固定区域到顶部之后,自动固定。制作div滚动到顶部固定不滚动特效

代码如下:(此代码包括了HTML代码和CSS样式代码以及JS特效代码)了解更多的代码知识,可学习html视频教程

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>制作div滚动到顶部固定不滚动特效</title>
<style>
/*浏览器*/
body{margin:0;padding:0;margin-top:40px;}
/*顶部区域*/
#head{width:100%;height:40px;background:#0509fe;position:fixed;top:0px;left:0px;z-index:999;}
#LOGO,#hd-menu{display:inline-block;vertical-align:top;}
#hd-menu li{display:inline-block;margin-right:20px;}
#hd-menu li a{color:#fff;}

/*头部区域*/
.div3{width:20%;height:1500px;background:#0F3;padding:10px;display:inline-block;box-sizing:border-box;vertical-align:top;}
.div4{width:80%;height:1500px;background:#eee;padding:10px;display:inline-block;box-sizing:border-box;}
.div5{background:red;width:250px;height:250px;margin-bottom:20px;text-align:center;line-height:250px}
#nav_keleyi_com{position:relative;top:0;background:#125430;width:250px;height:250px;text-align:center;line-height:250px;border-top:2px solid red;}
#foot{width:100%;height:100px;background:#0509fe;margin-top:-4px;text-align:center;}

</style>
</head>
<body>
<header id="head">
<div id="LOGO"><img src="http://www.xuewangzhan.net/vip/static/image/common/logo.png" width="214" height="40"></div>
<nav id="hd-menu">
                <ul>
                        <li><a href="http://www.xuewangzhan.net/">论坛首页</a></li>
                        <li><a href="http://www.xuewangzhan.net/gonggao/390.html">视频教程</a></li>
                        <li><a href="http://www.xuewangzhan.net/jz/wangzhan/">学员网站</a></li>
                        <li><a href="http://www.xuewangzhan.net/gonggao/393.html">VIP报名区</a></li>
                        <li><a href="http://www.xuewangzhan.net/jz/why/">建站问答</a></li>
                        <li class="kehu"><a href="http://www.xuewangzhan.net/jd/moban/">客户案例</a></li>
                        <li><a href="http://www.xuewangzhan.net/vip/" target="_blank" rel="nofollow">VIP培训区</a></li>
                        <li><a href="http://www.xuewangzhan.net/search/" target="_blank" rel="nofollow">快速搜索</a></li>
                </ul>
        </nav>

</header><section id="cont">

<div class="div3">
<div class="div5">不固定区域</div>
<div id="nav_keleyi_com">顶部固定区域</div>
</div><div class="div4">主体内容区域</div>
</section><footer id="foot">
底部版权信息
</footer>
<script type="text/javascript" >
function menuFixed(id){
var obj = document.getElementById(id);
var _getHeight = obj.offsetTop;

window.onscroll = function(){
changePos(id,_getHeight);
}
}
function changePos(id,height){
var obj = document.getElementById(id);
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop < height){
obj.style.position = 'relative';
obj.style.top = '0';
}else{
obj.style.position = 'fixed';
obj.style.top = '40px';
}
}
</script>
<script type="text/javascript">
window.onload = function(){
menuFixed('nav_keleyi_com');
}
</script>
</body>
</html>

通过以上的代码,我们就可以在自己建网站时,制作一个固定区域,放一些自己网站比较重要的文章链接了。

上一课: 下一课:

发表评论