導航欄在修正後跟隨滾動

Question

我在網站上有產品頁面。 我有一個像家一樣的頂級菜單，關於等... 然後我試圖讓左側的菜單保持固定的產品列表。 看到圖像：但是

隨着我當前的代碼在左邊的菜單如下這裏滾動代碼：

<div id="product-list"> 
<ul> 
    <li><a href="bfm.html">item 1</a></li> 
    <li><a href="hbm.html">item 1</a></li> 
    <li><a href="laminated.html">item 1</a></li> 
    <li><a href="ps.html">item 1</a></li> 
    <li><a href="pm.html">item 1</a></li> 
    <li><a href="wm.html">item 1</a></li> 
</ul> 
</div> 

#product-list{ 
    position:fixed; 
} 
#product-list ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    width: 12%; 
    background-color: #FFF; 
    position:fixed; 
    height: 100%; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    padding-top:10%; 
} 
#product-list li{ 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 
#product-list li a { 
    display: block; 
    color: #000; 
    padding: 8px 0 8px 16px; 
    text-decoration: none; 
} 
#product-list li a:hover:not(.active) { 
    background-color: #555; 
    color: white; 
} 

Answer 1

Plunkr Example

變化我做

有一個我在你的代碼上做了幾件事。

1. 在你的風格定義中，我刪除了一些重複的代碼。你有幾個地方爲#product-list，使它成爲一個固定的元素，這讓人討厭。
2. 我添加了一個「特殊情況」類，#product-list.fixed，它刪除列表頂部的填充並將其更改爲position至fixed，其中top偏移量爲0。
3. 我改變了一點你的HTML。我刪除了產品列表ul的包裝div，並將#product-list ID添加到ul。
4. 如果滾動大於您的物品的原始位置，我還在一些javacript中添加了/將.fixed類添加到您的#product-list元素。
5. 我添加了一個transition:all linear 0.3元素平穩地從當我們在fixed類
6. 在代碼中添加下面我只是改變了彈出窗口placehold.it圖像圖像的變化，這樣我就不會用你的帶寬。
7. 編輯更改z-index以允許側面菜單在頁腳下滑動。

代碼

爲下面的代碼的順序是

1. 使用Javascript（我用jQuery，這是一個超級流行的框架）
2. CSS（你可能想尋找到一個CSS像Bootstrap這樣的框架可以減少你的開發時間）
3. HTML

$(document).ready(function() { 
 
    var side_offset = $('#product-list').offset(); 
 
    //Initial offset. 
 
    $(document).on('scroll', function() { 
 
    $('#product-list').toggleClass('fixed', $(document).scrollTop() > side_offset.top); 
 
    }); 
 
})

@charset "utf-8"; 
 

 
/* CSS Document */ 
 

 
html * { 
 
    font-family: verdana; 
 
    !important; 
 
} 
 
#header { 
 
    background-color: #565656; 
 
    color: white; 
 
    text-align: center; 
 
    height: 10%; 
 
    position: relative; 
 
    z-index: 999; 
 
} 
 
#header ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 
#header li { 
 
    display: inline; 
 
} 
 
#header li a { 
 
    display: inline-block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 30px; 
 
    text-decoration: none; 
 
    vertical-align: middle; 
 
} 
 
#header li a.active { 
 
    text-decoration: underline; 
 
} 
 
#header li a:hover { 
 
    background-color: #111; 
 
} 
 
#header li a.a-no-hover:hover { 
 
    background-color: transparent; 
 
} 
 
#product-list { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 12%; 
 
    background-color: #FFF; 
 
    position: absolute; 
 
    height: 100%; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    padding-top: 10%; 
 
    z-index: 100; 
 
    transition: all linear 0.3s; 
 
} 
 
#product-list.fixed { 
 
    position: fixed !important; 
 
    padding-top: 0; 
 
    top: 0; 
 
} 
 
#product-list li { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 
#product-list li a { 
 
    display: block; 
 
    color: #000; 
 
    padding: 8px 0 8px 16px; 
 
    text-decoration: none; 
 
} 
 
#product-list li a:hover:not(.active) { 
 
    background-color: #555; 
 
    color: white; 
 
} 
 
#nav { 
 
    line-height: 30px; 
 
    background-color: #eeeeee; 
 
    height: 300px; 
 
    width: 100px; 
 
    float: left; 
 
    padding: 5px; 
 
} 
 
#section1 { 
 
    width: 90%; 
 
    height: auto; 
 
    overflow: hidden; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 
#section1 img { 
 
    width: 100%; 
 
    height: auto; 
 
    opacity: 1; 
 
    transition: opacity 0.5s linear; 
 
} 
 
#section3 { 
 
    width: 90%; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    /*float:left; 
 
    padding:10px;*/ 
 
    margin-bottom: 2%; 
 
} 
 
#section2 { 
 
    width: 50%; 
 
    height: auto; 
 
    margin-top: 5%; 
 
    margin-bottom: 5%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    text-align: left; 
 
    /*float:left;*/ 
 
    text-align: justify; 
 
    text-justify: inter-word; 
 
} 
 
.centerer { 
 
    text-align: center; 
 
} 
 
#section5 { 
 
    width: 90%; 
 
    height: auto; 
 
    margin-top: 5%; 
 
    margin-bottom: 5%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    margin-left: 10%; 
 
} 
 
img { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
} 
 
.container { 
 
    width: 70%; 
 
    margin: 10px auto; 
 
    position: relative; 
 
    text-align: center; 
 
} 
 
.block { 
 
    height: auto; 
 
    width: auto; 
 
    display: inline-block; 
 
    margin: 2%; 
 
    vertical-align: middle; 
 
    padding-left: 2%; 
 
    padding-right: 2%; 
 
    font-size: 1.2em; 
 
} 
 
.floating-product { 
 
    display: inline-block; 
 
    width: 20%; 
 
    height: 20%; 
 
    /*border: 3px solid #565656;*/ 
 
    padding: 1%; 
 
    margin: 0 auto; 
 
    margin-top: 2%; 
 
    margin-bottom: 2%; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 
.floating-product img { 
 
    margin: 0 auto; 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    display: block; 
 
} 
 
.floating-product a { 
 
    color: #000; 
 
} 
 
.floating-product a:hover { 
 
    color: #565656; 
 
} 
 
.block a { 
 
    color: #000; 
 
} 
 
.block a:hover { 
 
    color: #565656; 
 
} 
 
#footer { 
 
    background-color: #565656; 
 
    color: white; 
 
    overflow: auto; 
 
    /*clear: both;*/ 
 
    text-align: left; 
 
    padding: 1% 5%; 
 
    height: 10%; 
 
    vertical-align: middle; 
 
    position: relative; 
 
    z-index: 999; 
 
} 
 
hr { 
 
    width: 70%; 
 
} 
 
h1 { 
 
    text-align: left; 
 
    font-size: 1.5em; 
 
    margin-left: 11%; 
 
} 
 
.margin { 
 
    margin-left: 11%; 
 
} 
 
span { 
 
    background: transparent; 
 
} 
 
table { 
 
    margin-top: 5%; 
 
} 
 
.tg { 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
    width: 99%; 
 
    margin: 0 auto; 
 
    font-size: 1.1em; 
 
    font-weight: 100; 
 
} 
 
.tg td { 
 
    padding: 5px 10px; 
 
    border-style: none; 
 
    border-width: 1px; 
 
    overflow: hidden; 
 
    word-break: normal; 
 
    font-weight: 100; 
 
} 
 
.tg th { 
 
    font-weight: 100; 
 
    padding: 5px 10px; 
 
    border-style: none; 
 
    border-width: 1px; 
 
    overflow: hidden; 
 
    word-break: normal; 
 
} 
 
.tg .tg-lqy6 { 
 
    text-align: right; 
 
    vertical-align: top; 
 
    padding-right: 3%; 
 
} 
 
.tg .tg-yw4l { 
 
    vertical-align: top; 
 
    text-align: left; 
 
    padding-left: 3%; 
 
} 
 
a.fancybox img { 
 
    border: none; 
 
    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.6); 
 
    -o-transform: scale(1, 1); 
 
    -ms-transform: scale(1, 1); 
 
    -moz-transform: scale(1, 1); 
 
    -webkit-transform: scale(1, 1); 
 
    transform: scale(1, 1); 
 
    -o-transition: all 0.2s ease-in-out; 
 
    -ms-transition: all 0.2s ease-in-out; 
 
    -moz-transition: all 0.2s ease-in-out; 
 
    -webkit-transition: all 0.2s ease-in-out; 
 
    transition: all 0.2s ease-in-out; 
 
} 
 
a.fancybox:hover img { 
 
    position: relative; 
 
    z-index: 999; 
 
    -o-transform: scale(1.03, 1.03); 
 
    -ms-transform: scale(1.03, 1.03); 
 
    -moz-transform: scale(1.03, 1.03); 
 
    -webkit-transform: scale(1.03, 1.03); 
 
    transform: scale(1.03, 1.03); 
 
} 
 
.imager { 
 
    display: inline-block; 
 
    width: 15%; 
 
    height: 10%; 
 
    padding: 1%; 
 
    margin: 0 auto; 
 
    margin-top: 2%; 
 
    margin-bottom: 2%; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 
.imager img { 
 
    margin: 0 auto; 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    display: block; 
 
} 
 
.black a { 
 
    float: right; 
 
    color: #000 
 
} 
 
.black a:hover { 
 
    color: #565656; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="header"> 
 
    <ul> 
 
    <li> 
 
     <a class="a-no-hover" href="index.html"> 
 
     <img src="placehold.it/300x300" /> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="index.html">HOME</a> 
 
    </li> 
 
    <li> 
 
     <a class="active" href="product.html">PRODUCTS</a> 
 
    </li> 
 
    <li> 
 
     <a href="order.php">ORDER</a> 
 
    </li> 
 
    <li> 
 
     <a href="about.html">ABOUT US</a> 
 
    </li> 
 
    <li> 
 
     <a href="contact.html">CONTACT US</a> 
 
    </li> 
 
    </ul> 
 
</div> 
 
<ul id="product-list"> 
 
    <li> 
 
    <a href="bfm.html">Composite Bag Filter Media</a> 
 
    </li> 
 
    <li> 
 
    <a href="hbm.html">High Dust-Loading Bag Filter Media</a> 
 
    </li> 
 
    <li> 
 
    <a href="laminated.html">Laminated Composite Filter Media</a> 
 
    </li> 
 
    <li> 
 
    <a href="ps.html">Polyester Synthetic Fibre Filter Media</a> 
 
    </li> 
 
    <li> 
 
    <a href="pm.html">Polypropylene Melt-Blown Filter Media</a> 
 
    </li> 
 
    <li> 
 
    <a href="wm.html">Wire Mesh Backed Composite Filter Media</a> 
 
    </li> 
 
</ul> 
 
<div id="section5"> 
 
    <h1>Product Listing</h1> 
 
    <div class="floating-product"> 
 
    <a href="bfm.html"> 
 
     <img class="displayed" src="//placehold.it/300x300" /> 
 
     <br /> 
 
     <h4>Composite Bag Filter Media</h4> 
 
    </a> 
 
    <p> 
 
     <a style="color:#06F" href="bfm.html">Read more...</a> 
 
    </p> 
 
    </div> 
 
    <div class="floating-product"> 
 
    <a href="hbm.html"> 
 
     <img class="displayed" src="//placehold.it/300x300" /> 
 
     <br /> 
 
     <h4>High Dust-Loading Bag Filter Media</h4> 
 
    </a> 
 
    <p> 
 
     <a style="color:#06F" href="hbm.html">Read more...</a> 
 
    </p> 
 
    </div> 
 
    <div class="floating-product"> 
 
    <a href="laminated.html"> 
 
     <img class="displayed" src="//placehold.it/300x300" /> 
 
     <br /> 
 
     <h4>Laminated Composite Filter Media</h4> 
 
    </a> 
 
    <p> 
 
     <a style="color:#06F" href="laminated.html">Read more...</a> 
 
    </p> 
 
    </div> 
 
    <div class="floating-product"> 
 
    <a href="ps.html"> 
 
     <img class="displayed" src="//placehold.it/300x300" /> 
 
     <br /> 
 
     <h4>Polyester Synthetic Fibre Filter Media</h4> 
 
    </a> 
 
    <p> 
 
     <a style="color:#06F" href="ps.html">Read more...</a> 
 
    </p> 
 
    </div> 
 
    <div class="floating-product"> 
 
    <a href="pm.html"> 
 
     <img class="displayed" src="//placehold.it/300x300" /> 
 
     <br /> 
 
     <h4>Polypropylene Melt-Blown Filter Media</h4> 
 
    </a> 
 
    <p> 
 
     <a style="color:#06F" href="pm.html">Read more...</a> 
 
    </p> 
 
    </div> 
 
    <div class="floating-product"> 
 
    <a href="wm.html"> 
 
     <img class="displayed" src="//placehold.it/300x300" /> 
 
     <br /> 
 
     <h4>Wire Mesh Backed Composite Filter Media</h4> 
 
    </a> 
 
    <p> 
 
     <a style="color:#06F" href="wm.html">Read more...</a> 
 
    </p> 
 
    </div> 
 
</div> 
 
<div id="footer"> 
 
    <span style="float:left;"> 
 
     <b>Contact Us</b> 
 
     <br /> 
 

 
    Email: contact@dongguanhy.com  <br /> 
 

 
    Contact Phone: +86-769-23150100  <br /> 
 

 
    Contact Fax: +86-769-23152700  <br /> 
 

 
    Company Address: Liu Yong Wei Industry Area, DongGuan, GuandDong Province, China  <br /> 
 
     </span> 
 
    <span style="float:right;"> 
 
     <b>Follow Us</b> 
 
     <br /> 
 
     <br /> 
 
     <a href="http://facebook.com/dongguanhy/" target="_blank"> 
 
      <img src="placehold.it/300x300" /> 
 
     </a> 
 
     <!--<img src="http://mmo-stream.net/dong/images/linkedin.png"/>--> 
 
     </span> 
 
</div>