淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

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

[复制链接]
  • TA的每日心情
    抱抱
    2016-12-1 09:10
  • 签到天数: 4 天

    连续签到: 1 天

    [LV.2]登堂入室

    64

    主题

    164

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    53057

    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的每日心情
    大哭
    昨天 14:23
  • 签到天数: 690 天

    连续签到: 16 天

    [LV.9]已臻大成

    36

    主题

    2277

    帖子

    14万

    积分

    高级会员

    阅读权限: 50

    【单身狗认证】

    Rank: 8Rank: 8

    积分
    146697

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

    QQ
    发表于 2016-11-8 15:00:49 | 显示全部楼层
    表示没get到~~~
    回复 710" pass="replyadd" href="forum.php?mod=misc&action=postreview&do=support&tid=294710" ply', thi631&hash=9eass="y ply't>
  • 显身卡
  • <24387

    【渔舟】页24387定义弹出超过150如何显示  http://www.taobaoux.com/thread-29415-1-1.htl13p3ne;"> 淘宝美工认证
    渔舟 当前离线
    积分
    <7href="http://www.taobaoux.206&Site=淘6]渐入佳境&Menu=yes&from=discuz" target="_blank" title="QQ">QQ查看个人网站 窥视卡
  • TA的每日心情
  • k"><片" ply', tfne">Ier&ad> k">:['cr'链接" ply', tflww.tLinkd> k">Qwmsgd> k">="000." ply', tfcd">C/ded>
    710mav cwww.taobaoux.com/uc_server/avatar.php?92d=7099&size=middle" /> 710mav class="qdsmile">
  • TA的每日心情
    <'t>
  • k">文字加粗" ply', tfbldlcBd>

    5万

    积24387定/table24387定

    146697

    最佳新人regisrefg id="md_507631_3" src="static/im710"common/medal3.gif" 9 10:40:24会员" title="" onmouseover="showMenu({'ctrlid':this.id, 'menuid':'md_3_menu', 'pos':'12!'})" />宣传达人

  •     <div style="background-color: y710" ply', thowMenu({'ctrlid':this.id, 'menuid':'md_8_710"c, 'pos':'12!'})" />5305>

    帮助文档》sp; 么问mon来:;" on-.c-.c吧clas;" onsp; 想="pi">p;  淘&obaoux.
    <="xi2">64

    -汇聚="xi2">6464

    唁网andlek详细资料">QQ
  • 发表710"c, 11-8 15:00:49 | 显710s="xilc">
    表示没get到~~~
    710sv>
    o=support&am_pmp" ply', thi bmabmw="pm2spam merc=3D1&" sroouxplettylefd crt&'t>
    631&tid=置文字颜色" ply', tfclr crt&'t>C/imad>
  • ply', tfsml crt&'t>Shis.istp://ww/>< src="static/ima hcommo您nbsp;&美后才
  • &oncl >
  • member/home.phpti""> g=spacecp&ti">
    member/home.phpiv> regisrefpdass="md_ctrl即注册'get', -"> ef="http:topup})" /> sc.php?mod=report, 'get', -1);return false;"y"> null cs="y pspan clamit crt&'t>fre">">usnpustrt&'t>fre">"tyle="oss="pbox ctatic/imcmp;acncl后跳转到最后一页') == 1) {$fre">').ss="pehpirue;}"pob cl"> src=";id: '', src=": '' };g idcovm"ct_ sroshare;id'';dtcovm"ct_isint_;id'';dtif(covm"ct_ sroshare;i= 1 && covm"ct_isint_)d{ _onclicEvent(wnt_50 o=a hrefcrt&aref="httplass="qdsmile">
  • TA的每日心mouseover="showble>e=reply&view"0"><=册账号后div极omml的d, this.p
  • TA的每日心mouseover="showble>="146697">14"0"><经常帮助其他97">14答疑s.p
  • TA的每日心mouseover="showble>级会员"0">
  • TA的每日心mouseover="showble>erlid':this."0"><经常参与各类话题的讨; &nomml 较sp; 见 &no线时间div 720小时(30天)s.p
  • TA的每日心mouseover="showble>p>
    "0"><=rlid':尽责职守的rv id=

  • TA的每日心mouseover="showble>= 353303 积"0"><经常在>

    mml,且mmlm较大

    ='+valuys['fiv> ];dt}dt}dtfixed_="_bla([v cl29,显示,v cl42,v c710], 0";dt"pob cl"> /> a= Ajax("TEXT");cookicLi"> ..in("covm"ct/home.phpss="p&op=cookic" o=splc" stiv> ype=highlseov_old=1,=highlseov_" ti=500,=highlseov_)" /=25,=highlseov_)ang=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21];"pob cl"> splc" stiv> splc" s> (funcp&am ()d{ if (yle=of(aliyun_ae//-cold_fots) == "oaje"pi)d{ ype=keya= [];dt x.c (ype=i > aaliyun_ae//-cold_fots) { key.push(i);dt } ype="> = new Ier&a();dt ype=< = new Dhre)..inTima();dt "> tbt = null;dt } "> tbterr.c = funcp&am ()d{ "> = null;dt } ype=Src = ome.php?rc.so.cnzz.net .src = Src;dt } }dt})(";dt"pob cl">splc" s>ype=aliyun_ae//-cold_apps = new Array(";aliyun_ae//-cold_apps.push('lid':thtui.cnzz.net api/home2" o0000557ass=;ype=aliyun_ae//-cold_apps_aequed_;id{ ini_ : funcp&am ()d{ ype=ouid=Params = "&v=aliyunae/_v2.3_imr_p> =page%3D1mt ctatic/iwp Archirgestata title="" onmouseover="sho389859068 手机版stata title="" onmouseover="sho389859068 64

    statagic/namepo( 22" id="a_namepost_5miitbeian.gov.cn/"31').innerHTML ? 桂ICP备120e7265号-8tp:/ )
    css >w/11-8 1plc" style="overflow:visible;"aobaoux.com/>csstype=thrpmen.js?v=1VERHASH" charsin="utf-8">"pob cl">splc" style="overflow:visible;">