右侧固定代码(随页面滚动)

发表于 2020-03-14 09:37:12   |   下载附件   |   字体:
右侧固定左侧固定滚动页面右侧固定
/**
 * 
 * @authors Your Name (you@example.org)
 * @date    2020-02-20 13:02:44
 * @version $Id$
 */

// 谭子良 右侧固定代码优化
// id 右侧固定容器
// offsetBotton 底部固定位置
function aFixedbottom(id, offsetBotton) {
	var offsetBotton = offsetBotton || 0;
	var objMarginLeft = 0;
	var isIE6 = ($.browser.msie && $.browser.version == '6.0') ? true : false;
	var Container = $('#' + id);

	if (Container.length != 1) return 'fixedbottom不能正确获取id';

	var initTop = Container.offset().top,
		initHeight = Container.height(),
		initWidth = Container.width(),
		initOutWidth = Container.outerWidth(),
		initWinH = $(window).height(),
		initBodyH = $('body').height();

	var Shadow = $('<div id="js_fixedbot_shadow"></div>').addClass(Container.attr('class')).height(initHeight).css({
		'visibility': 'hidden',
		'display': 'none'                                                                       
	});
	Container.after(Shadow);

	//页面高度、侧边栏高度均达不到一屏高度的情况下,无需脚本处理
	//if( initBodyH<=initWinH || initHeight<=initWinH ) return null;

	var fixedFlag = false;
	var triggerHeight;
	objMarginLeft = 1000 - initOutWidth - 500;

	this.setObjMarginLeft = function(wrapperWidth) {
		wrapperWidth = wrapperWidth ? wrapperWidth : 1000;
		objMarginLeft = wrapperWidth - initOutWidth - wrapperWidth / 2;
	}

	this.init = function() {
		var that = this;
		setInterval(function() {
			var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
			var winH = $(window).height();
			//临界值(触发高度)
			if (!fixedFlag) {
				triggerHeight = Container.height() + Container.offset().top - $(window).height() + offsetBotton;
			}
			if (scrollTop >= triggerHeight) {
				fixedFlag = true;
				if (!isIE6) {
					Container.css({
						'position': 'fixed',
						'width': initWidth,
						'top': 'auto',
						'bottom': offsetBotton,
						'left': '50%',
						'marginLeft': objMarginLeft
					});
					Shadow.css('display', 'block');
				}
			} else {
				fixedFlag = false;
				if (!isIE6) {
					Container.css({
						'position': 'static',
						'marginLeft': 0
					})
					Shadow.css('display', 'none');
				}
			}
		}, 40);
	}
};

// 右侧栏固定效果
if ($('#adFix').length > 0) {
	var Fixedbottom = new aFixedbottom('adFix',94);
	Fixedbottom.init();
}

// --------------------------------------

// 谭子良 右侧固定代码优化
// id 右侧固定容器
// offsetBotton 底部固定位置
// endOffsetBotton 滚动条至页面底部时的最终 底部固定位置
function aFixedbottom(id, offsetBotton,endOffsetBotton) {
	var offsetBotton = offsetBotton || 0;
	var objMarginLeft = 0;
	var isIE6 = ($.browser.msie && $.browser.version == '6.0') ? true : false;
	var Container = $('#' + id);

	if (Container.length != 1) return 'fixedbottom不能正确获取id';

	var initTop = Container.offset().top,
		initHeight = Container.height(),
		initWidth = Container.width(),
		initOutWidth = Container.outerWidth(),
		initWinH = $(window).height(),
		initBodyH = $('body').height();

	var Shadow = $('<div id="js_fixedbot_shadow"></div>').addClass(Container.attr('class')).height(initHeight).css({
		'visibility': 'hidden',
		'display': 'none'
	});
	Container.after(Shadow);

	//页面高度、侧边栏高度均达不到一屏高度的情况下,无需脚本处理
	//if( initBodyH<=initWinH || initHeight<=initWinH ) return null;

	var fixedFlag = false;
	var triggerHeight;
	objMarginLeft = 1000 - initOutWidth - 500;

	this.setObjMarginLeft = function(wrapperWidth) {
		wrapperWidth = wrapperWidth ? wrapperWidth : 1000;
		objMarginLeft = wrapperWidth - initOutWidth - wrapperWidth / 2;
	}

	this.init = function() {
		var that = this;
		setInterval(function() {
			var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
			var winH = $(window).height();
			//183为footer的高度
			var contentHeight = $('body').height() - endOffsetBotton;
			//临界值(触发高度)
			if (!fixedFlag) {
				triggerHeight = Container.height() + Container.offset().top - $(window).height() + offsetBotton;
			}
			if (scrollTop >= triggerHeight) {
				fixedFlag = true;
				if (!isIE6) {
					if (scrollTop >= (contentHeight - winH + offsetBotton)) {
						Container.css({
							'position': 'absolute',
							'width': initWidth,
							'bottom': 'auto',
							'top': contentHeight - Container.height(),
							'left': '50%',
							'marginLeft': objMarginLeft
						});
					} else {
						Container.css({
							'position': 'fixed',
							'width': initWidth,
							'top': 'auto',
							'bottom': offsetBotton,
							'left': '50%',
							'marginLeft': objMarginLeft
						});
					}
					Shadow.css('display', 'block');
				}
			} else {
				fixedFlag = false;
				if (!isIE6) {
					Container.css({
						'position': 'static',
						'marginLeft': 0
					})
					Shadow.css('display', 'none');
				}
			}
		}, 40);
	}
};

// 右侧栏固定效果
if ($('#adFix').length > 0) {
	var Fixedbottom = new aFixedbottom('adFix',10,94);
	Fixedbottom.init();
}