教程 IPS 侧边栏滑动 代码

登录后台 打开外观，选择要编辑的模板 点击代码模式 查找：

1. Template > Core > Front > Global > Sidebar (全部覆盖以下内容 是覆盖Sidebar里面所有内容 不是粘贴在后面)

{{$adsForceSidebar = ( \IPS\Settings::i()->ads_force_sidebar AND \IPS\core\Advertisement::loadByLocation( 'ad_sidebar' ) );}}
{{if (isset( \IPS\Output::i()->sidebar['enabled'] ) and \IPS\Output::i()->sidebar['enabled'] ) && ( ( isset( \IPS\Output::i()->sidebar['contextual'] ) && trim( \IPS\Output::i()->sidebar['contextual'] ) !== '' ) || ( isset( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) && \count( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) ) || ( \IPS\Dispatcher::i()->application instanceof \IPS\Application AND \IPS\Dispatcher::i()->application->canManageWidgets() ) || $adsForceSidebar )}}
	<div id='ipsLayout_sidebar' class='ipsLayout_sidebar{$position} {{if !( isset( \IPS\Output::i()->sidebar['contextual'] ) && trim( \IPS\Output::i()->sidebar['contextual'] ) !== '' ) && ( !isset( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) || !\count( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) ) && \IPS\Dispatcher::i()->application->canManageWidgets() && !$adsForceSidebar}}ipsLayout_sidebarUnused{{endif}}' data-controller='core.front.widgets.sidebar'>
		{{if $announcements = \IPS\core\Announcements\Announcement::loadAllByLocation( 'sidebar' ) AND ( ( isset( \IPS\Output::i()->sidebar['contextual'] ) && trim( \IPS\Output::i()->sidebar['contextual'] ) !== '' ) OR ( isset( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) && \count( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) ) )}}
			{template="announcementSidebar" group="global" app="core" params="$announcements"}
		{{endif}}
		<div class='ibtFloatSidebar'>
      	{{if isset( \IPS\Output::i()->sidebar['contextual'] ) && trim( \IPS\Output::i()->sidebar['contextual'] ) !== ''}}
			<aside id="elContextualTools" class='ipsClearfix' {{if isset( \IPS\Output::i()->sidebar['sticky'] )}}data-ipsSticky{{endif}}>
				{expression="\IPS\Output::i()->sidebar['contextual']" raw="true"}
			</aside>
		{{endif}}
		{{if $adsForceSidebar OR ( \IPS\core\Advertisement::loadByLocation( 'ad_sidebar' ) AND ( ( isset( \IPS\Output::i()->sidebar['contextual'] ) && trim( \IPS\Output::i()->sidebar['contextual'] ) !== '' ) OR ( isset( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) && \count( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) ) ) )}}
			<div data-role='sidebarAd'>
				{advertisement="ad_sidebar"}
			</div>
			<br><br>
		{{endif}}
		{template="widgetContainer" group="global" app="core" params="'sidebar', 'vertical'"}
      </div></div>
{{endif}}

<script>
 
  // 在右栏中“粘贴”内容的处理程序
(function(){
	var a = document.querySelector('.ibtFloatSidebar'), b = null, K = null, Z = 0, P = 0, N = 0;  // 如果 P 用数字替换零，则块将在浏览器窗口的上边缘到达元素的上边缘之前粘住，如果 N 的下边缘到达元素的下边缘。 可以是负数
	window.addEventListener('scroll', Ascroll, false);
	document.body.addEventListener('scroll', Ascroll, false);
	function Ascroll() {
		(function(jQuery) {
			var c = document.querySelector('#ipsLayout_mainArea'),
				Rc = c.getBoundingClientRect(),
				Ra = a.getBoundingClientRect(),
				R1bottom = Rc.bottom;
			if (b == null) {
				var Sa = getComputedStyle(a, ''), s = '';
				for (var i = 0; i < Sa.length; i++) {
					if (Sa[i].indexOf('overflow') == 0 || Sa[i].indexOf('padding') == 0 || Sa[i].indexOf('border') == 0 || Sa[i].indexOf('outline') == 0 || Sa[i].indexOf('box-shadow') == 0 || Sa[i].indexOf('background') == 0) {
						s += Sa[i] + ': ' +Sa.getPropertyValue(Sa[i]) + '; '
					}
				}
				b = document.createElement('div');
				b.className = "stopSticky";
				b.style.cssText = s + ' box-sizing: border-box; width: ' + a.offsetWidth + 'px;';
				a.insertBefore(b, a.firstChild);
				var l = a.childNodes.length;
				for (var i = 1; i < l; i++) {
					b.appendChild(a.childNodes[1]);
				}
			}
			//计算柱高
			a.style.height = b.getBoundingClientRect().height + 'px';
			a.style.padding = '0';
			a.style.border = '0';
			var Rb = b.getBoundingClientRect(),
				Rh = Ra.top + Rb.height,
				W = document.documentElement.clientHeight,
				R1 = Math.round(Rh - R1bottom),
				R2 = Math.round(Rh - W);
			if (Ra.bottom < R1bottom) {
				if((Rc.height > Rb.height) /*&& (Rb.height > W)*/) { // 检查列高是否大于内容高度
					if (Rb.height > W) {
						if (Ra.top < K) {  // 向下滚动
							//console.log('向下滚动');
							if (R2 + N > R1) {  // 不要深究
								//if ((Rb.bottom - W + N < 0) && (Rb.top - P < 0)) {  // 提取
								if ((parseInt(Rb.bottom) - W + N) <= 0/* && (Rb.top + W < 0)*/) {  // 提取
									b.className = 'startSticky';
									b.style.top = W - Rb.height - N + 'px';
									Z = N + Ra.top + Rb.height - W;
								} else {
									b.className = 'stopSticky';
									b.style.top = -Z + 'px';
								}
							} else {
								b.className = 'stopSticky';
								b.style.top = -R1 + 'px';
								Z = R1;
							}
						} else {  // 向上滚动
							//console.log('向上滚动');
							if (Ra.top - P < 0) {  // 不要到达顶部
								if (Rb.top - P >= 0) {  // 提取
									b.className = 'startSticky';
									b.style.top = P + 'px';
									Z = Ra.top - P;
								} else {
									b.className = 'stopSticky';
									b.style.top = -Z + 'px';
								}
							} else {
								b.className = '';
								b.style.top = '';
								Z = 0;
							}
						}
						K = Ra.top;
					} else {
						if ((Ra.top - P) <= 0) {
							if ((Ra.top - P) <= R1) {
								b.className = 'stopSticky';
								b.style.top = -R1 + 'px';
							} else {
								b.className = 'startSticky';
								b.style.top = P + 'px';
							}
						} else {
							b.className = '';
							b.style.top = '';
						}
					}
				} else {
					// 如果内容高度小于列高，则将列“钉”到顶部
					Z = 0;
					b.className = 'stopSticky';
					b.style.top = Z + 'px';
				}
				window.addEventListener('resize', function() {
					a.children[0].style.width = getComputedStyle(a, '').width
				}, false);
			}
		})(jQuery)
	}

})()
</script>

2.然后打开CSS 里 Custom.css 文件 ，把这个代码粘贴到后面

#ipsLayout_mainArea {height: auto;}
.startSticky {position: fixed; z-index: 101;}
.stopSticky {position: relative; z-index: 101;}

更新缓存 刷新 即可看到侧边栏跟随模式