Navigation bar follows scroll when fixed - html

Question

I have a product page on a website.
I have a top menu with like home, about etc....
then I'm trying to have a menu on the left that stays fixed with the product list.
See the image:
With my current code however the menu on the left follows the scrolling here is the code:
<div id="product-list">
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</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
Changes I made
There's a few things I did on your code.
In your style definition, I removed some repetitive code. You had a few places for the #product-list that made it a fixed element, which got annoying.
I added a "special case" class, #product-list.fixed which removes the padding on the top of the list and changes it's position to fixed, with a top offset of 0.
I changed your HTML a little bit. I removed the wrapper div for the product list ul and added the #product-list id to the ul instead.
I also added in some javacript to add in/remove the .fixed class to your #product-list element if the scroll is greater than your item's original position.
I added a transition:all linear 0.3 element to smooth out the change from when we add in the fixed class
in the code below I just changed the images that popup to placehold.it images so that I wouldn't be using your bandwidth.
Edit Changed the z-index to allow the side menu to slip under the footer.
Code
The order for the code below is
Javascript (I used jQuery, which is a super popular framework)
CSS (you may want to look into a CSS framework like Bootstrap which could cut down your development times)
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>
HOME
</li>
<li>
<a class="active" href="product.html">PRODUCTS</a>
</li>
<li>
ORDER
</li>
<li>
ABOUT US
</li>
<li>
CONTACT US
</li>
</ul>
</div>
<ul id="product-list">
<li>
Composite Bag Filter Media
</li>
<li>
High Dust-Loading Bag Filter Media
</li>
<li>
Laminated Composite Filter Media
</li>
<li>
Polyester Synthetic Fibre Filter Media
</li>
<li>
Polypropylene Melt-Blown Filter Media
</li>
<li>
Wire Mesh Backed Composite Filter Media
</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: [phone] <br />
Contact Fax: [phone] <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>