JS实现div层随屏滚动和位置固定
　　JS随屏滚动HTML4.0解析版代码，与上一个XHTML解析版的功能是一样的，只不过采用的解析块是不同的，网页上的指定块随屏滚动功能，我认为还是比较实用的。&
&!DOCTYPE HTML PUBLIC &-//W3C//DTD HTML 4.0 Transitional//EN&&
&meta http-equiv=&Content-Type& content=&text/ CHARSET=utf8& /&
&title&JS实现div层随屏滚动和位置固定丨芯晴网页特效丨&/title&
html,body{
padding:0;
&div id=&aa& style=&width:100height:100background:#c0c0c0;& &我在随平滚&/div&
&div id=&bb& style=&width:100height:100background:#c0c0c0;& &我静止不动&/div&
&div style=&width:100%;height:1500background:#000&&
&br&&br&&hr&&p align=&center&&&font color=skyblue&本特效由 &a href=&& target=&_blank&&芯晴网页特效&/a&丨 收集于互联网，只为兴趣与学习交流，不作商业用途。来源：源码爱好者&/font&&/p&
&div style=&width:100%;height:1500background:green&&&/div&
&div style=&width:100%;height:1500background:red&&&/div&
function scroll(p){
var d = document,dd = d.documentElement,db = d.body,w = window,o = d.getElementById(p.id),ie = /msie/i.test(navigator.userAgent),style,
//ie8下position:fixed下top left失效
o.style.cssText +=&;position:&+(p.f&&!ie?'fixed':'absolute')+&;&+(p.l==undefined?'right:0;':'left:'+p.l+'')+(p.t!=undefined?'top:'+p.t+'px':'bottom:0');
if(p.f&&ie){
o.style.cssText +=';left:expression(body.scrollLeft + '+(p.l==undefined?db.clientWidth-o.offsetWidth:p.l)+' + &px&);top:expression(body.scrollTop +'+(p.t==undefined?db.clientHeight-o.offsetHeight:p.t)+'+ &px& );'
db.style.cssText +=&;background-image:url(about:blank);background-attachment:&
w.onresize = w.onscroll = function(){
clearInterval(timer);
timer = setInterval(function(){
var st = db.scrollTop,c;
- o.offsetTop + (p.t!=undefined?p.t:(w.innerHeight||db.clientHeight)-o.offsetHeight);
o.style.top = o.offsetTop + Math.ceil(Math.abs(c)/10)*(c&0?-1:1) + 'px';
clearInterval(timer);
提示：可以先修改部分代码后再运行
相关图层样式特效：
大家都在看这些2710人阅读
javascript（14）
当div滚动到顶部时，DIV固定在顶部不动，不随滚动条滚动而滚动，除这个div以外的其它元素可以滚动
function scrollDiv
var ie6 = document.
var dv = $('#fixedMenu_keleyi_com'),
dv.attr('otop', dv.offset().top); //存储原来的距离顶部的距离
$(window).scroll(function () {
st = Math.max(document.body.scrollTop || document.documentElement.scrollTop);
if (st & parseInt(dv.attr('otop'))) {
if (ie6) {//IE6不支持fixed属性，所以只能靠设置position为absolute和top实现此效果
dv.css({ position: 'absolute', top: st });
else if (dv.css('position') != 'fixed') dv.css({ 'position': 'fixed', top: 0 });
} else if (dv.css('position') != 'static') dv.css({ 'position': 'static' });
html代码&&& 用到了css的z-index:这个属性，此处将固定的部分显示层在最上层，非固定部分当滚动时显示在固定部分的底层&
z-index:的值越大为固定在顶层
&div style='width:100%;
text-align:background:#z-index:99999;padding:30px 0px 0px 0' id=&fixedMenu_keleyi_com&&
&div style='width:100%; margin-top:0 margin-bottom:10 text-align:background:#z-index:99;' &
此外为你要固定的内容
&div class=&coe_team_gover coe_main_content& style='width: 100%;z-index:-99999;'&此处为非固定内容&/div&
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：76472次
积分：1435
积分：1435
排名：千里之外
原创：60篇
转载：31篇
评论：26条
(3)(1)(10)(2)(5)(8)(1)(2)(3)(1)(4)(3)(7)(3)(1)(6)(4)(1)(2)(2)(10)(11)本帖子已过去太久远了，不再提供回复功能。后使用快捷导航没有帐号？
只需一步，快速开始
查看: 6070|回复: 4
如何让弹出层处在屏幕正中间，不随滚动条滚动，兼容ie6
&!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/ charset=utf-8& /&
&style type=&text/css&&
&&*{margin:0;padding:0;}
&&/* 删除遮罩层 */
.delete_theme_mask{
background:#333333;
opacity:0.8;
filter:alpha(opacity=80);
}
/* 删除弹出框 */
.delete_theme_wrap{
height:300
background:#
}
/* 删除标题 */
.delete_theme_wrap .delete_theme_title{
background:#
line-height:57
padding-left:18
font-size:13
color:#000000;
font-family:&微软雅黑&;
}
/* 删除主题问号符号 */
.delete_theme_wrap .delete_theme_help_ico{
padding:40px 0 0 180
}
/* 删除提示语 */
.delete_theme_wrap .delete_theme_tips{
padding:23px 0 0 62
font-size:13
color:#000000;
font-family:&微软雅黑&;
}
/* 删除按钮区域 */
.delete_theme_wrap .delete_theme_btns{
background:#eaeff3;
text-align:
padding-top:17& & & &
}
&/style&
&script src=&/jquery/1.9.0/jquery.js&&&/script&
&script type=&text/javascript&&
$(function(){
&&var maskWidth&&=$(window).width();
&&var maskHeight =$(document).height();
& & & & $('.delete_theme_mask').css({&width&:maskWidth});
& & & & $('.delete_theme_mask').css({&height&:maskHeight});
&&var themeWrapHeight =$(window).height();
&&var themeWrapWidth&&=$(window).width();
& & & & $('.delete_theme_wrap').css({&top&:themeWrapHeight/2-150});
& & & & $('.delete_theme_wrap').css({&left&:themeWrapWidth/2-200});
});
&/script&
&title&删除主题&/title&
&/head&
&body style=&height:100%;&&
&div style=&height:3000&&&/div&
&!-- 遮罩层 --&
&div class=&delete_theme_mask&&&/div&
&!-- 删除主题弹出框开始 --&
&div class=&delete_theme_wrap&&
& &&!-- 删除主题标题 --&
& &&div class=&delete_theme_title&&删除主题&/div&
& & &!-- 删除主题问号图标 --&
& & &!-- 删除主题确定按钮区域 --&
& &&div class=&delete_theme_btns&&
& &&&&a class=&delete_theme_sured& href=&#&&确定&/a&
& &&&&a class=&delete_theme_cancel& href=&#&&取消&/a&
& &&/div&
&!-- 删除主题弹出框结束 --&
&/body&
&/html&
复制代码
&!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/ charset=utf-8& /&
&style type=&text/css&&
&&*{margin:0;padding:0;}
&&/* 删除遮罩层 */
.delete_theme_mask{
background:#333333;
opacity:0.8;
filter:alpha(opacity=80);
}
/* 删除弹出框 */
.delete_theme_wrap{
height:300
background:#
}
/* 删除标题 */
.delete_theme_wrap .delete_theme_title{
background:#
line-height:57
padding-left:18
font-size:13
color:#000000;
font-family:&微软雅黑&;
}
/* 删除主题问号符号 */
.delete_theme_wrap .delete_theme_help_ico{
padding:40px 0 0 180
}
/* 删除提示语 */
.delete_theme_wrap .delete_theme_tips{
padding:23px 0 0 62
font-size:13
color:#000000;
font-family:&微软雅黑&;
}
/* 删除按钮区域 */
.delete_theme_wrap .delete_theme_btns{
background:#eaeff3;
text-align:
padding-top:17& && &&&
}
&/style&
&script src=&/jquery/1.9.0/jquery.js&&&/script&
&script type=&text/javascript&&
$(function(){
&&var maskWidth&&=$(window).width();
&&var maskHeight =$(document).height();
& && &&&$('.delete_theme_mask').css({&width&:maskWidth});
& && &&&$('.delete_theme_mask').css({&height&:maskHeight});
&&var themeWrapHeight =$(window).height();
&&var themeWrapWidth&&=$(window).width();
& && &&&$('.delete_theme_wrap').css({&top&:themeWrapHeight/2-150});
& && &&&$('.delete_theme_wrap').css({&left&:themeWrapWidth/2-200});
& &
& &$(window).on('scroll',function(){
& &&&$('.delete_theme_wrap').css({&top&:themeWrapHeight/2-150+$(window).scrollTop()});
& && &&&$('.delete_theme_wrap').css({&left&:themeWrapWidth/2-200});
& &})
});
&/script&
&title&删除主题&/title&
&/head&
&body style=&height:100%;&&
&div style=&height:3000&&&/div&
&!-- 遮罩层 --&
&div class=&delete_theme_mask&&&/div&
&!-- 删除主题弹出框开始 --&
&div class=&delete_theme_wrap&&
& &&!-- 删除主题标题 --&
& &&div class=&delete_theme_title&&删除主题&/div&
& & &!-- 删除主题问号图标 --&
& & &!-- 删除主题确定按钮区域 --&
& &&div class=&delete_theme_btns&&
& &&&&a class=&delete_theme_sured& href=&#&&确定&/a&
& &&&&a class=&delete_theme_cancel& href=&#&&取消&/a&
& &&/div&
&!-- 删除主题弹出框结束 --&
&/body&
&/html&
复制代码
谢谢2楼兄弟。现在是居中了，但是拖动滚动条他会上下抖动，能不能让他固定静止不动，谢谢。
谢谢2楼兄弟。现在是居中了，但是拖动滚动条他会上下抖动，能不能让他固定静止不动，谢谢。 ...
我只用chrome测，你是在哪个浏览器看又抖动
谢谢2楼兄弟。现在是居中了，但是拖动滚动条他会上下抖动，能不能让他固定静止不动，谢谢。 ...
防抖动。试下这个
*html{background-image:url(about:blank); background-attachment:}复制代码
Powered by固定在网页顶部DIV层不跟随滚动条滑动
所属分类：
发布时间： 23:27
标签：jquery&&&javascirpt&&&css&&&html&&&web&&&?
?体验效果：/texiao/jquery/25/
最近浏览网页时看到一个比较不错的做法，就是网页的某一块在随浏览器滚动快要消失的时候会浮动在页面上，页面还可以继续往上翻滚，但比较突出的那一块一直贴在浏览器的顶部，比如顶部导航条就可以用这种效果，何问起自我感觉这种效果还是比较贴心的，于是乎自己钻研了下，也写了这样一种效果，现在将代码贴在下面和大家分享。完整代码：
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&jQuery元素滚动到顶部固定 - 何问起&/title&
&meta name="viewport" content="width=device-width, initial-scale=1.0"&
&base target="_blank" /&
&script type="text/javascript" src="/ziyuan/jquery/jquery-1.11.3.min.js"&&/script&
font-family: A
&div style="text-align:width:100%;margin:0"&
&h1&何问起&/h1&
jQuery元素滚动到顶部固定 &br /&固定在网页顶部跟随滚动条滑动而滑动的DIV层&br /&请滚动页面...&br /&
&a href="/texiao/yestop/"&Yestop&/a& &a href="/h/bjaf/hoverclock.htm"&HoverClock&/a& &a href=""&首页&/a&
&a href="/texiao/"&特效&/a&
&a href="/h/bjaf/jqguding.htm"&原文&/a&
&div style="height: 360background-color: #66FF66;text-align:"&
&div style="width:100%;text-align:height:200background-color:skyblue" id="divhovertree"&& &/div&
&div style="height: 200 visibility: background-color: Olive"&
&/div&&div style="height:200background-color:burlywood"&&/div&&div style="height:200background-color:darkorchid"&&/div&
&div style="height: 200 visibility: background-color:gray"&
&div style="height:200background-color:blue"&&/div&
&div style="height:200background-color:red"&&/div&
&div style="height:200background-color:yellow"&&/div&
&div style="height:200background-color:yellowgreen"&&/div&
&div style="height:800background-color:white"&&/div&
&script type="text/javascript"&
*滚动条滑动，位置不变的DIV层
*div_id：DIV的ID属性值，必填参数
*offsetTop：滚动条滑动时DIV层距顶部的高度，可选参数
function fixDiv(div_id, offsetTop) {
var Obj = $(‘#‘ + div_id);
//判断元素是否存在 何问起
if (Obj.length != 1) { }
var offsetTop = arguments[1] ? arguments[1] : 0;
var ObjTop = Obj.offset().
$(window).scroll(function () {
if ($(window).scrollTop() &= ObjTop) {
‘position‘: ‘relative‘,
‘position‘: ‘fixed‘,
‘top‘: 0 + offsetTop + ‘px‘,
‘z-index‘: 10
fixDiv(‘divhovertree‘, 5);//顶端浮动并于顶端保持5px的间距
?更多特效：?/blog/2165698?固定在网页顶部DIV层不跟随滚动条滑动标签：jquery&&&javascirpt&&&css&&&html&&&web&&&
转载请自觉注明原文:
声明：本站所有素材/文章除标明原创外，均来自网络转载，仅供学习和参考之用，版权归原作者所有，如果有侵犯到您的权益，请联系本站删除，谢谢合作！
相关文章：}