提供zblog模板_zblog主题_wordpress模板的下载和定制

卢松松博客右侧跟随滚动模块代码

天兴工作室 2014-04-06 19:41 教程 8741 11 评论


很多朋友在做站的时候都喜欢加入这种右侧跟随滚动模块代码,跟随滚动这一块的内容得到了更多的展示,天兴工作室之前做模板的时候也遇到很多这种,用了各种各样的方法,后来还是觉得卢松松博客的那个跟随滚动的代码比较简单点,今天就吧方法贴出来,希望可以帮助到有需要的朋友。

一共有三个部分的代码,css、js和html

在html需要加入跟随滚动的地方加入以下代码:

<div id="box">   
<div id="float" class="div1">     
这里写你网站的代码与标签    
</div>   
</div>

css部分代码,加入到你网站的css里面:

/*侧栏跟随*/   
#box{float:left; position:relative;width:250px;}
.div1{width:250px;}
.div2{position:fixed;_position:absolute;top:0;z-index:250;}

宽度自己随意调整,其他东西不要动,

js部分,把以下js代码加入你网站所调用的js里面也行,直接写入到html里面也可以:

//侧栏跟随    
(function(){    
    var oDiv=document.getElementById("float");    
    var H=0,iE6;    
    var Y=oDiv;    
    while(Y){H+=Y.offsetTop;Y=Y.offsetParent};    
    iE6=window.ActiveXObject&&!window.XMLHttpRequest;    
    if(!iE6){    
        window.onscroll=function()    
        {    
            var s=document.body.scrollTop||document.documentElement.scrollTop;    
            if(s>H){oDiv.className="div1 div2";if(iE6){oDiv.style.top=(s-H)+"px";}}    
            else{oDiv.className="div1";}        
        };    
    }    
})();

好了,大功告成,自己再美化调整下,以融入自己的网站里面去就完成了。


没有找到能解决你问题的教程?

您可以试着搜索一下或者直接在线提问。我们也提供收费技术支持,有需要可以在线联系我们。

在线提问 在线客服

11 位网友评论:

  • joykin

    joykin 6年前 (2018-03-05) 回复

    还是不知道把代码放哪!

  • 000000

    000000 9年前 (2015-02-21) 回复

    你的的那个升级版的主题居然没有加这个代码进去,我说咋不能滑动呢!

    • 天兴工作室

      天兴工作室 9年前 (2015-02-22) 回复

      什么升级版?天兴黄升级版?有这个啊,仔细看主题介绍说明

  • 系芯

    系芯 9年前 (2015-02-15) 回复

    按照方法改了,我的模板没成功

  • 大城小我

    大城小我 10年前 (2014-07-16) 回复

    水品有限,没有成功,闷闷

  • 访客

    访客 10年前 (2014-04-24) 回复

    你好,想请教一下,文章中代码部分框架是如何实现的,谢谢

    • 天兴

      天兴 10年前 (2014-04-25) 回复

      请把问题描述的清楚些,我才好回答额

      • 香港新世界机

        香港新世界机 10年前 (2014-09-30) 回复

        是不是静态的页面才可以,伪静态的不可以是吧

        • 天兴工作室

          天兴工作室 10年前 (2014-09-30) 回复

          跟伪静态什么的没关系的,一样用

      • 访客

        访客 10年前 (2014-04-25) 回复

        就是文章中代码部分的“1234、一条绿色竖线、代码”这个显示效果是如何实现的,谢谢!

        • 天兴工作室

          天兴工作室 10年前 (2014-04-26) 回复

          ⊙﹏⊙b汗 就是编辑器中选择"代码语言"就行了

欢迎 发表评论: 取消回复

请填写验证码
  • 最新文章
  • 热文排行
  • 最多评论
标签聚合
  • 登 录
  • 注册账号 忘记密码?
  • 注 册
  • 已有账号?直接登录 忘记密码?
  • 社交账号登录