侧边栏跟随屏幕滚动效果

代码2015-06-241,937 人已阅来源:网络

侧边栏跟随屏幕滚动效果,现在已经很流行了。尤其是博客跟资讯类网站,在主页面比较长的情况下,侧边栏跟随屏幕滚动,能够极大的增加用户粘度,提高网站pv的。所以在此推荐这个经典js特效。

这个效果的用法很简单,引入js,在侧边栏写一个div,加上id:sidebar-follow。在里面写内容即可。

注意事项:

一、id=”sidebar-follow”。这个div上面好像必须得有内容。

二、需要给id:sidebar-follow加上一个宽度,宽度一般跟侧边栏宽度一样。

三、这个特效是原生js的。原生特效用法请参考下面的demo。

四、还有一个jquery版本,用法如下:

  1. 下载sidebar-follow-jquery.js
  2. 依次引Jquery文件、sidebar-follow-jquery.js文件。
  3. 在页面里添加以下调用js:
<script>
 (new SidebarFollow()).init({
element: jQuery('#sidebar-follow'),
distanceToTop: 0
});
</script>

原生js效果预览:

运行代码
<runcode>
<!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>
</head>
<body>
<style type="text/css">
body{ margin:0; padding:0;}
.sidebar{ width:728px; height:2000px; border-right:1px solid #999;}
#sidebar-follow{ width:728px; background:#f6f6f6;}
#sidebar-follow p{ font-size:12px; line-height:35px; padding:0 10px; margin:0;}
.box{ height:200px; text-align:center; color:#fff;  line-height:200px; background:#999;}
</style>
<div class="sidebar">
  <div class="box">固定内容区域</div>
  <div id="sidebar-follow">
    <!--此处可放滚动内容,可以放多个div-->
    <p><a href="https://www.tonjay.com/170.html">侧边栏跟随屏幕滚动效果</a></p>
    <p><a href="https://www.tonjay.com/170.html">侧边栏跟随屏幕滚动效果</a></p>
    <p><a href="https://www.tonjay.com/170.html">侧边栏跟随屏幕滚动效果</a></p>
    <p><a href="https://www.tonjay.com/170.html">侧边栏跟随屏幕滚动效果</a></p>
    <p><a href="https://www.tonjay.com/170.html">侧边栏跟随屏幕滚动效果</a></p>
    <p><a href="https://www.tonjay.com/170.html">侧边栏跟随屏幕滚动效果</a></p>
    <!--滚动内容到此结束-->
  </div>
</div>
<script type="text/javascript">
/**
 * @author: mg12 [http://www.neoease.com/]
 * @update: 2012/12/05
 * @www.tonjay.com 注:可将此段js另存为一个js文件进行调用。
 * @name: sidebar-follow.js
 */
SidebarFollow = function() {
	this.config = {
		element: null, // 处理的节点
		distanceToTop: 0 // 节点上边到页面顶部的距离
	};
	this.cache = {
		originalToTop: 0, // 原本到页面顶部的距离
		prevElement: null, // 上一个节点
		parentToTop: 0, // 父节点的上边到顶部距离
		placeholder: document.createElement('div') // 占位节点
	}
};
SidebarFollow.prototype = {
	init: function(config) {
		this.config = config || this.config;
		var _self = this;
		var element = document.getElementById(_self.config.element);
		var prevElement =  document.getElementById(_self.config.prevElement);
		// 如果没有找到节点, 不进行处理
		if(!element) {
			return;
		}
		// 获取上一个节点
		var prevElement = _self._getPrevElement(element);
		while(prevElement.offsetHeight < 0) {
			prevElement = _self._getPrevElement(prevElement);
			if(!prevElement) {
				break;
			}
		}
		_self.cache.prevElement = prevElement;
		// 计算父节点的上边到顶部距离
		var parent = element.parentNode;
		var parentToTop = _self._getCumulativeOffset(parent).top;
		var parentBorderTop = parseInt(parent.style.borderTop, 10);
		var parentPaddingTop = parseInt(parent.style.paddingTop, 10);
		_self.cache.parentToTop = parentToTop + parentBorderTop + parentPaddingTop;
		// 滚动屏幕
		_self._addListener(window, 'scroll', function() {
			_self._scrollScreen({element:element, prevElement:prevElement, _self:_self});
		});
		// 改变屏幕尺寸
		_self._addListener(window, 'resize', function() {
			_self._scrollScreen({element:element, prevElement:prevElement, _self:_self});
		});
	},
	/**
	 * 修改节点位置
	 */
	_scrollScreen: function(args) {
		var _self = args._self;
		var element = args.element;
		var prevElement = args.prevElement;
		var toTop = _self.config.distanceToTop;
		// 如果 body 有 top 属性, 消除这些位移
		var bodyToTop = parseInt(document.getElementsByTagName('body')[0].style.top, 10);
		if(!isNaN(bodyToTop)) {
			toTop += bodyToTop;
		}
		var elementToTop = 0;
		if(element.style.position === 'fixed') {
			elementToTop = _self._getScrollY();
		} else {
			elementToTop = _self._getCumulativeOffset(element).top - toTop;
		}
		var elementToPrev = _self._getCumulativeOffset(prevElement).top + _self._getVisibleSize(prevElement).height;
		// 当节点进入跟随区域, 跟随滚动
		if(_self._getScrollY() > elementToTop) {
			// 添加占位节点
			var elementHeight = _self._getVisibleSize(element).height;
			_self.cache.placeholder.style.height = elementHeight + 'px';
			element.parentNode.insertBefore(_self.cache.placeholder, element);
			// 记录原位置
			_self.cache.originalToTop = elementToTop;
			// 修改样式
			element.style.top = toTop + 'px';
			element.style.position = 'fixed';
		// 否则回到原位
		} else if(_self.cache.originalToTop > elementToTop || elementToPrev > elementToTop) {
			var parent = _self.cache.placeholder.parentNode;
			if(parent) {
				// 删除占位节点
				parent.removeChild(_self.cache.placeholder);
				// 修改样式
				element.style.position = 'static';
			}
		}
	},
	/**
	 * 获取累计偏移量, 即元素到页面左上角的横行和纵向距离
	 */
	_getCumulativeOffset: function(element) {
		var offset = {
			left:0,
			top:0
		};
		do {
			offset.left += element.offsetLeft || 0;
			offset.top += element.offsetTop  || 0;
			element = element.offsetParent;
		} while (element);
		return offset;
	},
	/**
	 * 获取元素可见尺寸 (包括边线和滚动条)
	 */
	_getVisibleSize: function(element) {
		var dimension = {
			width:0,
			height:0
		};
		dimension.width = element.offsetWidth;
		dimension.height = element.offsetHeight;
		return dimension;
	},
	/**
	 * 获得滚动条纵向距离
	 */
	_getScrollY: function() {
		if(typeof window.pageYOffset != 'undefined') {
			return window.pageYOffset;
		}
		if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
			return document.documentElement.scrollTop;
		}
		return document.body.scrollTop;
	},
	/**
	 * 添加监听事件
	 */
	_addListener: function(node, type, listener) {
		if(node.addEventListener) {
			node.addEventListener(type, listener, false);
			return true;
		} else if(node.attachEvent) {
			node['e' + type + listener] = listener;
			node[type + listener] = function() {
				node['e' + type + listener](window.event);
			};
			node.attachEvent('on' + type, node[type + listener]);
			return true;
		}
		return false;
	},
	/**
	 * 获取上一个节点
	 */
	_getPrevElement: function(element) {
		var prev = element.previousSibling;
		while(prev.nodeType !== 1) {
			prev = prev.previousSibling;
		}
		return prev;
	}
};
</script>
<script>
/* <![CDATA[ */
(new SidebarFollow()).init({
	element: 'sidebar-follow',
	distanceToTop: 0
});
/* ]]> */
</script>
</body>
</html>