淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 456|回复: 3
收起左侧

【渔舟】(续)页头弹出超150像素显示

[复制链接]
  • TA的每日心情
    抱抱
    3 天前
  • 签到天数: 4 天

    连续签到: 1 天

    [LV.2]登堂入室

    61

    主题

    154

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    51879

    QQ
    发表于 2016-11-8 14:23:52 | 显示全部楼层 |阅读模式
    上一贴中给大家介绍了利用系统导航制作超过150像素显示的弹出。
    具体内容请参考帖子:【渔舟】页头自定义弹出超过150如何显示  http://www.taobaoux.com/thread-29415-1-1.html

    今天给大家介绍的是,应用Popup(弹出层)制作自定义导航,且超过高度超过150像素可以显示的方法。
    先来看一下效果。 实例预览地址:https://yijohn.taobao.com/p/xgzs.htm
    02.gif

    我们知道,页头超过150像素的区域会被隐藏起来,所以,如果直接将代码写到页头,下面弹出的部分是不会正常显示的。
    我们的思路是,利用弹出层,将触点元素和弹出元素分开,触点元素放在页头,弹出元素放在下面即可。

    我们用下面的这段弹出代码来测试。(对弹出层不熟悉的同学可以到这里学习 http://open.taobao.com/doc2/detail.htm?articleId=102541&docType=1&treeId=10
    1. <div class="first-trigger">我只是个触点而已,把鼠标滑到我身上</div>

    2. <div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{
    3.           'trigger':'.first-trigger',
    4.           'align':{
    5.                   'node':'.first-trigger',
    6.                   'offset':[0,0],
    7.                   'points':['cr','cc']
    8.                   }
    9.             }">
    10.     <div style="background-color: yellow; height: 100px; width: 100px;">
    11.        我是一个弹出层
    12.     </div>
    13. </div>
    复制代码


    000.jpg

    上面这段代码中,红色部分为触点元素,下面绿色部分为弹出元素。

    我们将触点元素放到系统店招部分。
    001.jpg

    然后将弹出放到下面的自定义区。
    002.jpg

    这样,弹出的内容就不会受到页头150像素高的限制了,是不是很简单?

    当然这种方法也有一个弊端,就是做的内容只在当前页面显示,无法在所有页面显示,所以我们需要将弹出的部分在每个自定义页面都添加一次。
    然后在详情页也要添加一次。

    如果不想每个页面都添加,也可以直接将弹出代码放到页尾,因为页尾部分是公用的,所以每个页面都可以正常显示。

    你get到了吗?


  • TA的每日心情
    大哭
    1 小时前
  • 签到天数: 651 天

    连续签到: 4 天

    [LV.9]已臻大成

    37

    主题

    2231

    帖子

    13万

    积分

    高级会员

    阅读权限: 50

    【单身狗认证】

    Rank: 8Rank: 8

    积分
    138218

    最佳新人热心会员宣传达人活跃会员优秀版主灌水之王

    QQ
    发表于 2016-11-8 15:00:49 | 显示全部楼层
    表示没get到~~~
  • TA的每日心情
    抱抱
    3 天前
  • 签到天数: 4 天

    连续签到: 1 天

    [LV.2]登堂入室

    61

    主题

    154

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    51879

    QQ
     楼主| 发表于 2016-11-8 16:19:11 | 显示全部楼层

    继续加油!

  • TA的每日心情
    心跳
    5 小时前
  • 签到天数: 43 天

    连续签到: 1 天

    [LV.5]略有小成

    3

    主题

    170

    帖子

    6068

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    6068

    发表于 2016-11-9 10:40:24 | 显示全部楼层
    过路人,看了支持下

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    小黑屋|Archiver|手机版|粤公网安备44060502000322号|淘宝美工论坛 ( 桂ICP备12007265号-8 )  

    GMT+8, 2016-12-4 20:33 , Processed in 0.135017 second(s), 17 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表