CSS教程:纯CSS代码实现边框随滑动条滚动

文章目录

在访问有些较为成熟的wordpress网站时,经常会看到一些较为人性化的功能,比如有些热门文章边框会随滑动条滚动而滚动。有些wordpress网站采用JS语言实现浮动窗口的功能,今天暗淡的黑介绍下纯CSS下实现边框随滑动条滚动的效果。

对于CSS来说,要实现边框位置的自动变换,所需要的是position的属性值,不同的position属性值实现不同的功能。

说明

position这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

看一下W3C对于position的属性值有怎样的介绍和作用:

position属性值和作用

 

根据W3C的介绍,position属性中的fixed定义:生成绝对定位的元素,相对于浏览器窗口进行定位。也就是说我们可以给与某个内容框fixed属性,使其在网页显示的起初,位置固定,随着浏览器窗口变动而变动。

相应CSS代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@charset "utf-8";
/* CSS Document */

body, ul, li { margin:0; padding:0; font:12px Verdana, Geneva, sans-serif;}
#top_banner{ width:948px; height:100px; margin-bottom:10px; border:1px solid #ccc;}
.clear{ clear:both;}
#main_content{ width:950px; margin:10px auto; height:1200px;}
#main_left{ float:left; width:140px; text-align:left; padding-left:1px; overflow:hidden; border:1px solid #ccc; height:600px;display:block;}
#main_ringht{ float:right; width:800px; padding-right:1px; overflow:hidden; border:1px solid #ccc; height:800px;}
.main_left_nav{ width:138px;}
.main_left_nav ul{ list-style:none;}
.main_left_nav ul li{ margin-top:6px; border-bottom:1px dashed #ccc;}
.main_left_nav ul li a{ text-decoration:none; color:#000;}
.main_left_nav ul li a:hover{ color:red; text-decoration:underline;}

/* 下面是定义浮动内容框的CSS*/
.rightRoll{ right:10px; width:138px; height:500px; border:1px solid #ccc; display:block; position:fixed; top:40px; }

相应的html代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="rightRoll">
<h1>Right_Side</h1>
</div>
这个边框可以随着滚动条的滑动而滑动
<div class="clear"></div>
<div id="main_content">
<div id="top_banner">
<h1 style="text-align: center; font-size: 40px;">Banner</h1>
</div>
<div id="main_left">
<div class="main_left_nav"></div>
<h1>Left_Side</h1>
</div>
<div id="main_ringht">
<h1 style="text-align: center; font-size: 40px;">Content
暗淡的黑个人网站
www.wenchenhk.com</h1>
</div>
</div>

效果图如下:

CSS实现内容框随滑动条滚动

声明:本站除特别声明外,均为本站原创,转载请注明出处:暗淡的黑IT网络,谢谢!