网页制作教程

图片等比例放大和缩小的代码

怎么实现滚屏无刷新动态加载内容

insertAdjacentHTML动态插入内容的使用方法

jquery获取值和控制值操作大全

现在的位置: 网页制作教程＞ JS网页特效＞正文

侧边栏始终显示在可视屏幕范围内的特效代码

发表于2016/11/27 ⁄ JS网页特效 ⁄ 0条评论 ⁄ 热度 2,546℃

网站的左侧或者右侧的边栏，某个层元素随着鼠标的滚动始终显示在可视屏幕范围内。

这种效果很多网站都有，很多博客网站的广告位就采用这种效果。

要想实现这种特效，借助js代码就能实现，下面是实例。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>侧边栏始终显示在可视屏幕内的特效代码</title>
<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
margin:0;
padding:0;
}
.float {
background-color: #FFFEE0;
border: 1px solid #FFECB0;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
padding: 10px;
position: absolute;
right: 10%;
top:134px;
width: 80px;
}
</style>
</head>
<body style="height:3000px;">
<div class="float" id="float">滚动条随便怎么动，你都能看到我</div>
</div>
<script type="text/javascript">
window.onscroll = function(){
setInterval(scrol,30); 
}
function scrol(){
var oFd = document.getElementById('float');
var top = oFd.style.top;
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
if(scrollTop > 134){
oFd.style.position = 'fixed';
oFd.style.top = '0';
}else{
oFd.style.position = 'absolute';
oFd.style.top = '134px';
}
}
</script>
<p align="center"><font color=black>本特效由 <a href="http://www.webym.net" target="_blank">源码网</a>丨www.webym.net 收集于互联网，只为兴趣与学习交流，不作商业用途。来源：网有卖</font></p>
</body>
</html>

运行代码提示：您可以先修改部分代码再运行。

声明:如需转载，请注明来源于www.webym.net并保留原文链接：http://www.webym.net/jiaocheng/268.html