用php在在旁边做一个滚动,侧边栏跟随屏幕滚动效果

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

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

注意事项：

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

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

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

四、还有一个jquery版本，用法如下：依次引Jquery文件、sidebar-follow-jquery.js文件。

在页面里添加以下调用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 

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;

}

};

element: 'sidebar-follow',distanceToTop: 0});

本文链接: https://www.dtmuban.com/course/439.html (转载时请保留)