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

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

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

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

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

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

  1. avatar

    ブランドコピーオメガ時計
    当店はブランドコピーオメガ時計専門店,販売以下
    世界一流ブランドコピー時計:ロレックスコピー、ウブロコピー、オメガコピー、シャネルコピー…
    最高品質ブランドコピーN級品時計新作最新入荷,信用第一 なので、ご安心ください,全国送料無料!超人気新品の大量入荷!
    信用第一、良い品質、低価格は私達のち残りの切り札です。
    オメガコピー等などのブランドコピー品 を扱っております。

    ■お客さんのメールに 迅速返信します。
    ■入金を確認して、 一日 の以内は出荷できます。
    ■ご注文を期待しています
    偽物ブランド https://www.watcher0769.com/one/page-12.html

  2. ブランドコピーブランド専門店おすすめ!
    信用第一、良い品質、低価格は
    当社の商品は絶対の自信が御座います。
    ブランドコピーベルト
    ブランドコピー財布
    ブランドコピーサングラス偽物
    ◆ 当社今日 マフラー面な更新!
    ●在庫情報随時更新!(*^-^*)
    S/AAA品質 シリアル付きも有り付属品完備!
    全物品運賃無料(日本全国)
    ロレックス時計コピー https://www.yuku006.com/ProductDetail.aspx?Id=201812090613124604

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

发表评论