Jump to content

IPS 侧边栏滑动 代码

  • IPS 侧边栏滑动 代码

    IPS 侧边栏滑动 代码

       (0 reviews)

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

    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;}

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


    月光骑士
     Share

     Share


    User Feedback

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.

    Guest
shape1
shape2
shape3
shape5
shape7
shape8
×
×
  • Create New...

Important Information

Terms of Use Privacy Policy Guidelines We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.