实现导航条浮动的最简单方法

这两天跟博友十万大山谈论导航条的浮动问题,让我又长了知识了~~嗯,写个笔记。注:此方法只针对导航条处于网页最顶部的情况,但是对于我这个站这样的,就尴尬了……

以前说的解决方案是用js实现,感觉不够简单,也会影响网页打开速度。只需要修改其属性position: fixed;就可以将它“固定”在网页某个位置,不随网页上下拉动而消失,另外添加z-index: 99;属性,使该层处于最顶层。这样会产生一个问题:导航条会偏离,不在网页中心对称,网页缩放或因电脑分辨率不同,会显得错版很不美观。这时只需改动它的宽度使width: 100%;即可。

上述方法对于一般的最顶端导航条都有效……设置好导航条浮动之后,网页会整体上移一点点,只需给下面整个层添加padding-top属性,具体值自己可以调试确定。

青春悄然而逝,我,一路向前...

15 Comments On 实现导航条浮动的最简单方法

  1. avatar

    マストな新作アイテム続々入荷中…
    長年の豊富な経験と実績を持ち、
    ブラントスーパーコピー品の完壁な品質を維持するために、
    一流の素材を選択し、精巧な作り方でまるで本物のようなな製品を造ります。
    高品質の商品を低価格で提供する、納期を厳守することは弊社の経営理念です。

    今、マストなブランドコピー新作アイテム続々入荷中…
    【シャネルコピー、ヴィトンコピー、コピーグッチ、エルメスコピー】
    ブランド財布コピー、バッグコピー腕時計コピーぜひおすすめです。
    偽物ブランド https://www.yuku006.com/ProductList1.aspx?TypeId=741724312753501

  2. 財布を購入、注文した翌日に届いてびっくり。丁寧に梱包されていて、ショップからのお礼のメモもあり。品物は展示品でキズや汚れありって書かれてましたが、どこに??って感じで新品同様でした!ショップの評価が良かったので決めたのですが、間違いなかったです!!
    オメガ シーマスター アクアテラ スーパーコピー エルメス https://www.watchsjp.com/brand-190.html

| ^_^ 本站因你的评论更精彩!

发表评论