javascript跟随滚动条滚动的层,页面刷新时切记滚动条的职位jquery代码

by admin on 2019年7月28日

@*点击按键页面刷新的时候 记住滚动条的职位*@

实则那些效应在相当多网站中都能看出,其主要性显示为网页两侧的转移广告。看起来倍感很难做,但实际原理是很轻便的,使用机械漏刻没0.1秒检验层的地方并将其置在钦命的岗位(相对于窗口)。写了三个总结的代码:

滚动到钦点地点然后我们就固定在侧面,或左边手,或最上端或底层效果,上边笔者来介绍四款滚动到一定地方后定位展现效果代码,有亟待理解的意中人可参看。

复制代码 代码如下:

 

js滚动到早晚地方后定位展现

<script type=”text/javascript”>
window.onbeforeunload = function () {
var scrollPos;
if (typeof window.pageYOffset != ‘undefined’) {
javascript跟随滚动条滚动的层,页面刷新时切记滚动条的职位jquery代码。scrollPos = window.pageYOffset;
}
else if (typeof document.compatMode != ‘undefined’ &&
document.compatMode != ‘BackCompat’) {
scrollPos = document.documentElement.scrollTop;
}
else if (typeof document.body != ‘undefined’) {
scrollPos = document.body.scrollTop;
}
document.cookie = “scrollTop=” + scrollPos;
//存款和储蓄滚动条地点到cookies中
}

 

 代码如下

window.onload = function () {
if (document.cookie.match(/scrollTop=([^;]+)(;|$)/) != null) {
var arr = document.cookie.match(/scrollTop=([^;]+)(;|$)/);
//cookies中不为空,则读取滚动条地点
javascript跟随滚动条滚动的层,页面刷新时切记滚动条的职位jquery代码。document.documentElement.scrollTop = parseInt(arr[1]);
必发88,document.body.scrollTop = parseInt(arr[1]);
}
}
</script>

 

复制代码

你或然感兴趣的篇章:

  • jQuery弹出层后禁止使用尾部滚动条(移动端关闭回到原岗位)
  • jQuery达成将div中滚动条滚动到钦点地方的办法
  • jquery
    点击成分后,滚动条滚动至该因素地点的法门
  • jQuery达成稳固滚动条地点
  • jQuery完结基于滚动条地点加载相应内容效用
  • 使用jQuery剖断浏览器滚动条地点的法子
  • 由此JQuery将DIV的滚动条滚动到钦点的职位便利自动定位
  • jQuery判定div随滚动条滚动到自然地点后截止
  • JS和JQUEKoleosY获取页面大小,滚动条地点,成分地方(示例代码)
  • JQuery获取成分文书档案大小、偏移和地点和滚动条地点的点子群集
  • jQuery实现滚动条滚动到子元素地方(方便定位)

 

<script type=”text/javascript”>
function htmlScroll()
{
 var top = document.body.scrollTop || 
document.documentElement.scrollTop;
 if(elFix.data_top < top)
 {
  elFix.style.position = ‘fixed’;
  elFix.style.top = 0;
  elFix.style.left = elFix.data_left;
 }
 else
 {
  elFix.style.position = ‘static’;
 }
}

 

function htmlPosition(obj)
{
 var o = obj;
 var t = o.offsetTop;
 var l = o.offsetLeft;
 while(o = o.offsetParent)
 {
  t += o.offsetTop;
  l += o.offsetLeft;
 }
 obj.data_top = t;
 obj.data_left = l;
}

 

var oldHtmlWidth = document.documentElement.offsetWidth;
window.onresize = function(){
 var newHtmlWidth = document.documentElement.offsetWidth;
 if(oldHtmlWidth == newHtmlWidth)
 {
  return;
 }
 oldHtmlWidth = newHtmlWidth;
 elFix.style.position = ‘static’;
 htmlPosition(elFix);
 htmlScroll();
}
window.onscroll = htmlScroll;

 

var elFix = document.getElementById(‘fixedRight’);
htmlPosition(elFix);

 

</script>

 

jQuery 当成分滚动到最上端后定位地方

 

 代码如下

 

复制代码

 

<script type=”text/javascript”
src=”;
<script>
$(function() {
    var elm = $(‘#pordAttr’);
    var startPos = $(elm).offset().top;
    $.event.add(window, “scroll”, function() {
        var p = $(window).scrollTop();
        $(elm).css(‘position’,((p) > startPos) ? ‘fixed’ :
‘static’);
        $(elm).css(‘top’,((p) > startPos) ? ‘0px’ : ”);
    });
});
</script>

 

必发88 1

 

 

 

页面滚动时一定侧面栏功用

 

内需按各自的急需修改相应代码,完整的JavaScript代码如下:

 

 代码如下

 

复制代码

 

//固定tag cloud
jQuery(function () {
    //钦赐的万丈,左侧栏距顶端距离+左边栏中度+可视页面包车型大巴高度
    var
sideTop=jQuery(“#sidebar”).offset().top+jQuery(“#sidebar”).height()+jQuery(window).height();
    var scTop = function() {
    if( typeof window.pageYOffset != ‘undefined’) {
        return window.pageYOffset;
    } else if( typeof document.compatMode != ‘undefined’ &&
document.compatMode != ‘BackCompat’) {
        return document.documentElement.scrollTop
    } else if( typeof document.body != ‘undefined’) {
        return document.body.scrollTop;
    }
}

 

jQuery(window).scroll(function() {
        if (scTop() > sideTop) {
        if(jQuery(“#fixed-siderbar”).length == 0){
           
//下边是要展现的模块,复制左侧栏中的标签云内容,追加到左侧栏的平底
            var tag = jQuery(“#tag_cloud-2
.widget-wrap”).clone().html();
            var html=”<div id=’fixed-siderbar’><div
id=’fixed-wrap’><div id=’fixedTag’ class=’widget 
widget_tag_cloud’ >”+ tag +”</div></div></div>”
            jQuery(“#sidebar”).append(html);
        }else{
            jQuery(“#fixed-siderbar”).show();
        }
    }else{
        jQuery(“#fixed-siderbar”).hide();
    };
  });
});

 

最后附上自个儿的CSS,一样按需修改

 

 代码如下

 

复制代码

 

#fixed-siderbar{
    z-index: 0;
    position:fixed;
    top:70px;
}

此广告位招租

功用如下

[Ctrl+A 全选
注:如需引进外界Js需刷新才具试行]

必发88 2

注意:
if (window.innerHeight) {
       posX = window.pageXOffset;
       posY = window.pageYOffset;
   }
   else if (document.documentElement && document.documentElement.scrollTop) {
       posX = document.documentElement.scrollLeft;
       posY = document.documentElement.scrollTop;
   }
   else if (document.body) {
       posX = document.body.scrollLeft;
       posY = document.body.scrollTop;
   }
这段代码是为着配合标准,在xhtml页面中,document.body.scrollTop始终为0,即该属性无效,由此必须用任何的品质来判别,为合作新旧职业,应该对质量的可用性举行判别。

援引网络的一段文字: 

引用

动用WEB标准会使ScrollTop属性失效!!! 
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 
Transitional//EN”
“;
<html xmlns=”;

累加这段后,document.body.scrollTop永世等于0

body onscroll = “alert(document.body.scrollTop);”永恒也不会抓住。

消除办法:

使用:

document.documentElement.scrollTop 

示例一:

var scrollPos; 
if (typeof window.pageYOffset != ‘undefined’) { 
  scrollPos = window.pageYOffset; 

else if (typeof document.compatMode != ‘undefined’ && 
    document.compatMode != ‘BackCompat’) { 
  scrollPos = document.documentElement.scrollTop; 

else if (typeof document.body != ‘undefined’) { 
  scrollPos = document.body.scrollTop; 

alert(scrollPos);

示例二:

function WebForm_GetScrollX() 
{
   if (__nonMSDOMBrowser) 
   {
       return window.pageXOffset;
   }
   else 
   {
       if (document.documentElement && document.documentElement.scrollLeft) 
       {
           return document.documentElement.scrollLeft;
       }
       else if (document.body) 
       {
           return document.body.scrollLeft;
       }
   }
   return 0;
}


pageYOffset是netscape的
document.body.scrollTop和document.documentElement.scrollTop是ie的,但自身不了解他们的真正分裂,只明白documentElement.scrollTop是xhtml包容的(笔者用的是strict)

你可能感兴趣的稿子:

  • 依据JS实现二维码图片固定在右下角某处并尾随滚动条滚动
  • javascript简单完毕跟随滚动条漂浮的回到最上端开关效果
  • 基于JavaScript达成div层跟随滚动条滑动
  • js
    右边浮动层效果落实代码(跟随滚动)
  • js写出遮罩层登录框和楹联广告并自动跟随滚动条滚动
  • javascript跟随滚动作效果应插件代码(javascript Follow
    Plugin)
  • 博客左侧栏模块跟随滚动条滑动固定效果的贯彻情势(js+jquery等)
  • xScrollStick
    跟随滚动条漂浮的JS特效
  • js跟随滚动条滚动浮动代码
  • JavaScript达成跟随滚动缓冲运动广告框

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图