css 侧栏跟随_JS+CSS实现侧边栏跟随浏览器滚动效果

下面是编程之家 jb51.cc 通过网络收集整理的代码片段。编程之家小编现在分享给大家，也给大家做个参考。

不少 blog 文章页的侧边栏都可以随着浏览器滚动而停留在页面，这对于长幅文章来说最好不过了。其实我们也可以用这种特效，只需简单的几个代码。下面就介绍转自卢松松 blog 的代码。

实现侧边栏跟随特效的方法：

添加 css：

/*侧栏跟随*/

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

如贵站的侧边栏宽度不是 250px，请另行修改！

添加 js：

//侧栏跟随

(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.οnscrοll=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";}

};

}

})();

将这段代码保存为 js 文件，如：loome.js，然后在贵站需要实现这个功能的网页中添加以下代码：

以上是编程之家(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

css 侧栏跟随_JS+CSS实现侧边栏跟随浏览器滚动效果相关推荐

css 侧栏跟随_简单代码实现智能侧边栏跟随固定浮动的效果
很多网站博客都喜欢用"侧栏跟随"的效果,也就是随着滚动条的滚动,而跟着滑动或者固定的效果:感觉非常的人性化,一来可以弥补当一个页面很长,但侧边栏太短的时候的空白,二来可以合理利用空 ...
css 侧栏跟随_如何实现博客的侧栏跟随（滚动条）效果
现在许多web2.0风格的网站都喜欢用"侧栏跟随"的效果,就是当一个页面很长的时候,设定侧栏内容会跟随滚动条,这种效果适用于评论较多.内容较长的网站. 这种特效对提高网站浏览量.文 ...
css导航栏_使用CSS的导航栏
css导航栏 CSS | 导航栏 (CSS | Navigation Bar) Developing websites is great but developing a user-friendly ...
css 多栏文字流 css two columns text flow
1. 方法一 : CSS3 <!DOCTYPE html> <html> <head> <style> .newspaper {-webkit-colu ...
css导航栏很多怎么办,css导航栏的疑问
原因是设置了标签浮动以后,父元素没有被撑开,解决代码: 方案一: 设置为行内块元素 .nav { list-style-type: none; margin: 0; padding: 0; backg ...
layui表头跟随滚动条滑动_侧边栏实现随滚动条滑动固定的效果
最近在一些博客看到侧边栏某些板块,随着滚动条的滑动,而跟着滑动或者固定的效果,感觉非常的人性化,一来可以弥补当一个页面很长,但侧边栏太短的时候的空白,二来可以合理利用空间展示更多信息,可以大大的提高 ...
css漂亮的侧导航栏,CSS3实现的可缩进的侧栏导航菜单
本文介绍一个可缩进的侧栏导航菜单,使用纯CSS3实现. CSS3实现的可缩进的侧栏导航菜单侧栏导航的HTML代码下面是侧栏导航的HTML代码,主要是使用UL-LI结构.注意到还用了一个SVG代码, ...
php如何去除侧栏,WordPress移除侧边栏图文教程
无论免费主题还是付费的专业主题,大部分默认布局都会有一个侧边栏.但侧边栏并非适合每一个站点,有时候我们可能需要移除它,该怎么做? 可以使用多种方法从整个网站或仅从特定内容中删除WordPress侧边栏 ...
CSS 两栏布局之总体设计
随意打开一个 word 文档一看,其布局便一目了然.它分为左.右两栏,左栏为文档的目录树,右栏为文档的内容.而内容区又被分为页眉.正文和页脚三个部分. 这里跟现实版的 word 保持一致,也采用相同的 ...

css 侧栏跟随_JS+CSS实现侧边栏跟随浏览器滚动效果

css 侧栏跟随_JS+CSS实现侧边栏跟随浏览器滚动效果相关推荐

最新文章

热门文章