discuz 帖子内容页楼层内头像固定代码

浏览
470
回复
1
收藏
0
点赞
2

1#

2018-11-11 16:30:34
楼层内左侧头像,在本楼层内fixed固定。
JS代码,摘自系统forum_viewthread.js
@xiaocai
  1.     <script type="text/javascript">
  2.     function fixed_avatar(pids, fixednv) {
  3.         var fixedtopnv = fixednv ? new fixed_top_nv('nv', true) : false;
  4.         if(fixednv) {
  5.             fixedtopnv.init();
  6.         }
  7.         function fixedavatar(e) {
  8.             var avatartop = fixednv ? fixedtopnv.run() : 0;
  9.             for(var i = 0; i < pids.length; i++) {
  10.                 var pid = pids[i];
  11.                 var posttable = $('pid'+pid);
  12.                 var postavatar = $('favatar'+pid);
  13.                 if(!$('favatar'+pid)) {
  14.                     return;
  15.                 }
  16.                 var nextpost = $('_postposition'+pid);
  17.                 if(!postavatar || !nextpost || posttable.offsetHeight - 100 < postavatar.offsetHeight) {
  18.                     if(postavatar.style.position == 'fixed') {
  19.                         postavatar.style.position = '';
  20.                     }
  21.                     continue;
  22.                 }
  23.                 var avatarstyle = postavatar.style;
  24.                 posttabletop = parseInt(posttable.getBoundingClientRect().top);
  25.                 nextposttop = parseInt(nextpost.getBoundingClientRect().top);
  26.                 if(nextposttop > 0 && nextposttop <= postavatar.offsetHeight) {
  27.                     if(BROWSER.firefox) {
  28.                         if(avatarstyle.position != 'fixed') {
  29.                             avatarstyle.position = 'fixed';
  30.                         }
  31.                         avatarstyle.top = -(postavatar.offsetHeight - nextposttop)+'px';
  32.                     } else {
  33.                         postavatar.parentNode.style.position = 'relative';
  34.                         avatarstyle.top = '';
  35.                         avatarstyle.bottom = '0px';
  36.                         avatarstyle.position = 'absolute';
  37.                     }
  38.                 } else if(posttabletop < 0 && nextposttop > 0) {
  39.                         if(postavatar.parentNode.style.position != '') {
  40.                             postavatar.parentNode.style.position = '';
  41.                         }
  42.                         if(avatarstyle.position != 'fixed' || parseInt(avatarstyle.top) != avatartop) {
  43.                             avatarstyle.bottom = '';
  44.                             avatarstyle.top = avatartop + 'px';
  45.                             avatarstyle.position = 'fixed';
  46.                         }
  47.                 } else if(avatarstyle.position != '') {
  48.                     avatarstyle.position = '';
  49.                 }
  50.             }
  51.         }
  52.         if(!(BROWSER.ie && BROWSER.ie < 7)) {
  53.             _attachEvent(window, 'load', function(){_attachEvent(window, 'scroll', fixedavatar);});
  54.         }
  55.     }
  56.     </script>
复制代码

  1.     <script type="text/javascript">
  2.     <!--{if $postlist && empty($_G['setting']['disfixedavatar'])}-->
  3.     fixed_avatar([<!--{echo implode(',', array_keys($postlist))}-->], {if empty($_G['setting']['disfixednv_viewthread']) }1{else}0{/if});
  4.     </script>
复制代码
解析出:
  1.     <script type="text/javascript">
  2.     fixed_avatar([133,134,135,136], 1);
  3.     </script>
复制代码
如果有帖子数组$postlist,且未关闭头像区域固定,则将$postlist按key(pid)分割。
如果关闭了帖子内容页顶部导航固定,则fixednv为1否则为0。
原本为table布局,这里以html形式做示例:

  1. <div id="pid133"><!--1楼容器-->
  2.         <div id="favatar133">1楼可滚动固定的内容</div>
  3.         <div>1楼帖子内容,此处省略一百万字</div>
  4.         <div id="_postposition133"><!--1楼固定内容到此停止固定--></div>
  5. </div>
  6. <div id="pid134"><!--2楼容器-->
  7.         <div id="favatar134">2楼可滚动固定的内容</div>
  8.         <div>2楼帖子内容,此处省略一百万字</div>
  9.         <div id="_postposition134"><!--2楼固定内容到此停止固定--></div>
  10. </div>
复制代码
不引用forum_viewthread.js,以上代码也可单独使用。
单独使用时改改命名,当楼层高度较大时,可用来固定一个工具栏或者一些按钮。

SIGNATURE
想的简单做的复杂

回复主题

已有 1 条回复
您需要登录后才可以回帖 登录 | 注册
高级模式

关于楼主
管理员
帖子
1483
日志
41
精华
19
精华推荐