Custom Scroll

by Ying Chor Ding

HTML

<div class="menu">This is menu</div>
<div class="header">This is header</div>
<nav class="clearfix">
    <ul class="left-sider-bar">
        <li><a target="main">Operation Details</a></li>
        <li><a target="story">Contact List</a></li>
        <li><a target="work">File List</a></li>
        <li><a target="our-news">Order Information</a></li>
        <li><a target="contact">Tracking</a></li>
    </ul>
</nav>
<div id="main" class="content">main</div>
<div id="story" class="content">story</div>
<div id="work" class="content">work</div>
<div id="our-news" class="content">our-news</div>
<div id="contact" class="content">contact</div>

CSS

* {
  margin: 0;
  padding: 0;
  font-family: arial;
}
.menu {
  background: blue;
  color: #fff;
  text-align: center;
  padding: 15px;
}
.header {
  background: orange;
  color: #fff;
  text-align: center;
  padding: 45px 15px;
}
nav {
    width: 45%;
    background: green;
    float: left;
}
.left-sider-bar li {
    margin: 0;
    list-style: none;
    padding: 5px;
}
.left-sider-bar li a {
    cursor: pointer;
    text-decoration:none;
    padding: 2px 5px;
    border-bottom: 1px solid #fff;
    display: block;
}
.left-sider-bar li a.active {
    background:red;
    color:#fff;
}
.content {
    float: right;
    width: 46%;
    padding: 50% 2%;
    background: #dfdfdf;
    margin-bottom: 10px;
    border: 1px solid red;
}

.clearfix:after, .clearfix:before { content: " "; display: table}
.clearfix:after { clear: both }
.clearfix{ *zoom: 1 }

JavaScript

var menu = $('.menu').height();
var header = $('.header').height();
var totalHeaderMenu = menu + header;
/* alert(menu);
alert(header);
alert(totalHeaderMenu); */



// Check the initial Position of the fixed_nav_container
var stickyHeaderTop = $('nav').offset().top;
 


$('nav li a').click(function () {
    var id = $(this).attr('target');
    $('html, body').stop().animate({
        scrollTop: $('#'+id).offset().top
    }, 500);
});

$(window).scroll(function() {	
	if( $(window).scrollTop() > stickyHeaderTop-totalHeaderMenu ) {
		$('nav').css({position: 'fixed', top: '0'});  
	} else {
		$('nav').css({position: 'relative', top: '0px'});
	}
                
    var myArray = new Array();
    $('div.content').each(function() {
        myArray.push($(this).offset().top);
    });
    for( var i=0; i<= myArray.length; i++){
        if($(this).scrollTop() >= myArray[i]){
            $('nav a').removeClass('active');
            $('nav a').eq(i).addClass('active');
        }
    }
});