CSS - 讓DIV永遠在最上方 置頂作法 Always on the top


HTML將header置頂的方法(使用CSS不使用到jQuery),
浮動式固定上選單的簡介如下:
每當瀏覽網頁時,由於網頁內容很長,使用者就得不斷的向下滾動,然而當要回到上方內容區時,就得依序往回滾動。

比較貼心的網站,會提供Top鈕讓使用者可以快速置頂,再去瀏覽其它主題的內容。這邊我們要達到的效果是上面的選單會一直固定在上方,
讓使用者可以不用滾動與置頂,就可以直接使用上方的選單。

DEMO範例:
這種固定式選單的做法很簡單:

CSS樣式:

#ontopDiv {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    z-index: 10000;
    background-color: #ffffc3;
    border-width: 1px;
    border-style: solid;
    padding: 15px;
    font-size: 16px;
}
#article {
  position: absolute;
    top: 100px;
}

HTML DIV:
<div id="ontopDiv">
  永遠在上方的內容區
</div>

<div id="article">
<p> CSS - 讓DIV永遠在最上方 置頂作法</p>
<p> 1</p>
</div>


可以達到 DIV 置頂並且不因滑鼠滾動畫面而一直固定在上方的參數主要是:
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;


加碼 m1kq0bcq

總是在下方的DIV 區塊 1

//保持在下方
<style>
#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}
</style>

<div id="footer">Footer - 不論怎麼捲動頁面,我都保持在下方</div>

總是在下方的DIV 區塊 2

CSS:
.prod-actiontray.sticky-actiontray {
    bottom: 0;
    top: auto;
    border-top: 1px solid #000;
    border-bottom: 0;
}
.prod-actiontray {
    width: 100%;
    position: fixed;
    background: #fff;
    border-bottom: 1px solid #d6d6d6;
    z-index: 999;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    left: 0;
    right: 0;
}

HTML:
<div id="select-product" class="select-product fwr clearfix" role="main">
  <div class="">
    text<p> text1<p> 
  </div>
  <div class="prod-actiontray sticky-actiontray" style="min-height: 50px;">

    <div class="price-info">
      <div class="priceFinance">
      text
      </div>
      <div class="add-to-cart primary" data-autom="continueButton">
        <button class="toolkit-button toolkit-button-disabled" type="button"><span>確定</span></button>
      </div>
    </div>
  </div>
</div>


DEMO範例:



jsfiddle.net/L505v6x5
jsfiddle.net/0f0279fa/
div layout always on top

回上一頁

相關文章:

喜歡這篇文章嗎?立即分享

Posted : / Views: 11890
Last updated :2017-11-23