How to shrink logo size when scrolling down?

How to shrink logo size when scrolling down? - javascript

if you go to http://www.baycrest.org/b2btest/index2.html
When scrolling down, I want the logo to shrink and fit in to the white bar. Is this done using Javascript? Or just pure CSS? If you know of any templates, that would help greatly too. Thanks

You can use css transitions and javascript/jquery to achive the effect.On scroll event add a new class to the header and add styles for the logo to shrink.A demo snippet for example.
$(document).on("scroll", function(){
if
($(document).scrollTop() > 50){
$("header").addClass("shrink");
}
else
{
$("header").removeClass("shrink");
}
});
*{
margin:0px;
padding:0px;
}
.header{
padding:20px;
top: 0;
position: fixed;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out ;
transition:all 0.5s ease-in-out ;
z-index:999;
background:#FFF;
width:100%;
border-bottom:1px solid #ddd;
}
.header img{
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out ;
transition:all 0.5s ease-in-out ;
width:75px;
height:75px;
}
.shrink{
padding:10px;
}
.shrink img{
width:50px;
height:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header">
<img src="http://via.placeholder.com/350x150" title="logo">
</header>
<div class="container">
<p><strong>Scroll down</strong></p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>

You can use JQuery's on-scroll event to get the location of the scroll from top. Based on that you can apply different CSS classes to the logo and change its size dynamically.
$(window).on('scroll',function(event){
console.log(event);
});
Read more here.
Another cool library for nicely handling the page header on scroll events is Headroom.js. You should check it out.

Related

Scroll-snapping breaks jQuery animated scroll

I have a scroll view with mandatory scroll-snapping:
scroll-snap-type: y mandatory;
I also have some buttons which provide shortcuts to the different elements of the scroll view. When a button is clicked, I use jQuery to animate the selected element into view:
$('#scroller').animate({ scrollTop:$('#scroller').scrollTop() + $(element).offset().top -$('#scroller').offset().top }, { duration: 'slow', easing: 'swing'});
This works perfectly in Safari. In Chrome and Firefox (Mac), however, it seems scroll-snapping breaks jQuery's animate function. Instead of a smooth scrolling, the element just awkwardly jerks into view. If I remove the scroll-snapping it works as expected.
I tried to be clever and disable the scroll-snapping whenever a button is clicked, then enable it again on manual mouse wheel scrolling:
$('#scroller').on('wheel', function(e) {
$('#scroller').css('scroll-snap-type', 'y mandatory');
});
This way, I got it to work both in Safari and Firefox. But Chrome still won't play ball. The trick kind of works, but, oddly enough, once or twice only. After clicking a button, it seems it simply ignores to enable the scroll-snapping again.
Any idea how to fix this? Thanks!
Demo: https://codepen.io/gurgel/pen/yLLORar
EDIT: After reading this post I got it working on all browsers using this smoothscroll polyfill. I would still prefer a vanilla solution though – it seems so close.
EDIT 2: Added snippet per suggestion:
$(document).ready(function() {
$('#scroller').on('wheel', function(e) {
/* This gets the scroll-snapping working again in Firefox, but not in Chrome */
$('#scroller').css('scroll-snap-type', 'y mandatory');
});
});
function changeView(index) {
/* Workaround to enable smooth scrolling in Chrome and Firefox */
$('#scroller').css('scroll-snap-type', 'none');
var id = 'view ' + index;
var element = document.getElementById(id);
$('#scroller').animate({ scrollTop: $('#scroller').scrollTop() + $(element).offset().top -$('#scroller').offset().top }, { duration: 'slow', easing: 'swing'});
}
#wrapper {
height:100vh;
width:50vw;
overflow: hidden;
display: flex;
flex-direction:row;
}
#menu ul {
list-style:none;
padding:0 20px 0 0;
cursor: pointer;
width:60px;
}
#menu ul li {
border:1px solid green;
}
#scroller {
flex-grow:1;
overflow-y: scroll;
scroll-snap-type: y mandatory;
/*
This breaks the animated scrolling in Chrome/FF.
*/
}
.view {
padding:10px;
scroll-snap-align: start;
}
/* Irrelevant styling */
.view:nth-child(1) {
background:#b3de81;
}
.view:nth-child(2) {
background:#6eb5c0;
}
.view:nth-child(3) {
background:#E94353;
}
.view:nth-child(4) {
background:#faaf08;
}
.view:nth-child(5) {
background:#CFA4DB;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
<div id="menu">
<ul>
<li onclick="changeView(1)">1</li>
<li onclick="changeView(2)">2</li>
<li onclick="changeView(3)">3</li>
<li onclick="changeView(4)">4</li>
<li onclick="changeView(5)">5</li>
</ul>
</div>
<div id="scroller">
<div id="view 1" class="view">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="view 2" class="view">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="view 3" class="view">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="view 4" class="view">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="view 5" class="view">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>

How do I enable bounce overscroll on the body only (not header and footer)?

I would like my webpage to have a scrollable container with a fixed header and footer. When the end of the scroll area is reached I want the bounce effect that is the default.
I have tried a lot of things but all the solutions do one of two things: Either the overscroll effect is disabled everywhere which results in a very abrupt stop when hitting the top or bottom of the page, or the bounce effect is there but the header and footer bounce too. I want the header and footer to stay fixed always but when the boundary of scrollable container is reached I want something to indicate that. I've included a stripped down piece of code that I've been using for testing.
<html>
<head>
<style>
html{
background: #222222;
}
header {
width: 100vw;
height: 10vh;
background: black;
color: white;
text-align: center;
position: fixed;
}
footer {
width: 100vw;
height: 10vh;
background: black;
color: white;
text-align: center;
position: fixed;
}
.container {
padding: 100px;
height: 100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
background-color: #eaeaea;
display: block;
height: 200px;
overflow-y: scroll;
text-align: center;
}
body {
color: red;
/* Set to auto to enable elastic scroll bounce effect */
overscroll-behavior: none;
}
</style>
</head>
<body>
<header>HEADER</header>
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<footer>FOOTER</footer>
</body>
</html>

try this, you need to set the height and position of your header, footer and content right
html{
background: #222222;
}
header {
width: 100vw;
height: 10vh;
background: black;
color: white;
text-align: center;
position: fixed;
top: 0vh;
}
footer {
width: 100vw;
height: 10vh;
background: black;
color: white;
text-align: center;
position: fixed;
bottom: 0vh;
}
.container {
background-color: #eaeaea;
height: 40vh;
padding: 20vh;
overflow-y: scroll;
text-align: center;
position: fixed;
top: 10vh;
}
body {
color: red;
/* Set to auto to enable elastic scroll bounce effect */
overscroll-behavior: none;
}
<head>
</head>
<body>
<header>HEADER</header>
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<footer>FOOTER</footer>
</body>

Show hide left navigation?

Im working on a menu that is located on the left side of the screen, and with a button that is located on the main content area i hide/show the menu.
When the screen width is less than 768px i hide the menu using css, the problem that im having is that because the menu is already hided, when the user clicks on the button instead of showing the menu it is trying to hide the menu again.
Im having a lot of troubles trying to explain the problem,
Here is the live demo, with all the code of what I have.
The code works fine for desktop, the problem is when the screen is less that 768px.
This is the function tham using to show/hide the menu and to move the content
$('#menu-toggle').click(function(e)
{
e.preventDefault();
$('#sidebar').toggleClass('show-hide');
$('#page-content').toggleClass('show-hide');
});
CSS
.show-hide
{
margin-left: -250px;
}
Full Code Live Demo: https://jsfiddle.net/c7cpLq9m/

Just added this to the media query:
#wrapper .show-hide {
margin-left: 0;
}
$('#menu-toggle, .mobile-trigger').click(function(e) {
e.preventDefault();
$('#sidebar').toggleClass('show-hide');
$('#page-content').toggleClass('show-hide');
});
.container-fluid {}
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.mobile-trigger{
display: none;
}
#sidebar {
z-index: 1000;
position: fixed;
height: 100%;
width: 250px;
overflow-y: auto;
background: #1b1e24;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.show-hide {
margin-left: -250px;
}
ul.sidebar-nav {
list-style: none;
padding: 0;
}
ul.sidebar-nav li a {
display: block;
padding: 10px 25px;
color: #8b91a0;
text-decoration: none;
transition: all 0.3s ease;
font-size: 1.1em;
}
ul.sidebar-nav li span {
padding-right: 10px;
}
ul.sidebar-nav li a:hover {
color: #fff;
background: rgba(255, 255, 255, 0.2);
}
#page-content {
transition: 0.5s;
/* position: absolute; */
padding-left: 255px;
/* width:100%;
background: grey;*/
}
#media ( max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#wrapper .show-hide{
margin-left: 0;
}
.mobile-trigger{
display: block;
}
#page-content {
padding-left: 0px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="wrapper">
<div id="sidebar">
<ul class="sidebar-nav">
<li><a class='mobile-trigger' href="#"><span class="glyphicon glyphicon-menu-hamburger"></span> Hide mobile menu</a></li>
<li class="sidebar-brand"><span class="glyphicon glyphicon-home"></span> Home</li>
<li><span class="glyphicon glyphicon-user"></span> Contacts</li>
<li><span class="glyphicon glyphicon-picture"></span> Content</li>
<li><span class="glyphicon glyphicon-inbox"></span> Inbound</li>
<li><span class="glyphicon glyphicon-envelope"></span> Outbound</li>
<li><span class="glyphicon glyphicon-globe"></span> Social</li>
<li><span class="glyphicon glyphicon-folder-close"></span> Automation</li>
<li><span class="glyphicon glyphicon-list-alt"></span> Reports</li>
<li><span class="glyphicon glyphicon-cog"></span> Settings</li>
<li><span class="glyphicon glyphicon-comment"></span> Feedback</li>
</ul>
</div>
<div id="page-content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<h1>Duis aute</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
Toggle Menu
<h1>Duis aute</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Excepteur</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Excepteur</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Excepteur</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Excepteur</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-lg-6">
<h1>Excepteur</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Excepteur</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Excepteur</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Excepteur</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Excepteur</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Excepteur</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
</div>
<!-- ./wrapper -->
Update:
On mobile is better if you not push the content because it will look very messy. It's better to have the menu over the content and add a button inside the menu to close it. For this I added an extra element inside the menu, added the class mobile-trigger, I've hidden it by default on desktop and showed it on mobile using display: block;. Also added the selector mobile-trigger to the click event.

In lonut's answer its better adding this styles:
#menu-toggle {
position: absolute;
top: 0;
right: 10px;
}
To bring the toggle menu button top right of page.

Fixed vertical navigation menu with dynamically changing menu buttons

I have created a theme for my website with a Fixed vertical navigation menu on the right hand side of the webpage to aid the users to scroll to different sections of the website. Now, these navigation menu buttons help the user in moving to the different sections of the page, but the color of the dots of the menu do not change when we click the dot of a section (or) if we traverse to a section by scrolling up/down. How do you make the color of the dots to change "Dynamically" in the below code? :-
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{
background-color:#3E3947;
}
#cd-vertical-nav {
position: fixed;
right: 40px;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 1;
}
#cd-vertical-nav li {
text-align: right;
list-style:none;
}
#cd-vertical-nav a {
display: inline-block;
/* prevent weird movements on hover when you use a CSS3 transformation - webkit browsers */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#cd-vertical-nav a:after {
content: "";
display: table;
clear: both;
}
#cd-vertical-nav a span {
display: inline-block;
float: right;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
-ms-transform: scale(0.6);
-o-transform: scale(0.6);
transform: scale(0.6);
}
#cd-vertical-nav a:hover span {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
#cd-vertical-nav a:hover .cd-label {
opacity: 1;
}
#cd-vertical-nav a.is-selected .cd-dot {
background-color: white;
}
#cd-vertical-nav .cd-dot {
position: relative;
top: 8px;
height: 12px;
width: 12px;
border-radius: 50%;
background-color: #d88683;
-webkit-transition: -webkit-transform 0.2s, background-color 0.5s;
-moz-transition: -moz-transform 0.2s, background-color 0.5s;
transition: transform 0.2s, background-color 0.5s;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
#cd-vertical-nav .cd-label {
position: relative;
margin-right: 10px;
padding: .4em .5em;
color: white;
font-size: 14px;
font-size: 0.875rem;
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
-moz-transition: -moz-transform 0.2s, opacity 0.2s;
transition: transform 0.2s, opacity 0.2s;
opacity: 0;
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
/*********************************RIGHT SIDE *************************************/
</style>
</head>
<body>
<nav id="cd-vertical-nav">
<ul>
<li>
<a data-number="1" href="#section1" class="is-selected">
<span class="cd-dot"></span>
<span class="cd-label">Intro</span>
</a>
</li>
<li>
<a data-number="2" href="#section2" class="">
<span class="cd-dot"></span>
<span class="cd-label">About</span>
</a>
</li>
<li>
<a data-number="3" href="#section3" class="">
<span class="cd-dot"></span>
<span class="cd-label">Features</span>
</a>
</li>
<li>
<a data-number="4" href="#section4" class="">
<span class="cd-dot"></span>
<span class="cd-label">Portfolio</span>
</a>
</li>
<li>
<a data-number="5" href="#section5">
<span class="cd-dot"></span>
<span class="cd-label">Pricing</span>
</a>
</li>
<li>
<a data-number="6" href="#section6">
<span class="cd-dot"></span>
<span class="cd-label">Contact</span>
</a>
</li>
</ul>
</nav>
<section id="section1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</section>
<section id="section2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</section>
<section id="section3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</section>
</body>
What JavaScript/Ajax/jQuery/HTML/CSS code do I need to write to make it work?
That is how do we "Dynamically" change the { class="is-selected" } on the code :-
<li> <a data-number="2" href="#section2" class=""> <span class="cd-dot"> </span> <span class="cd-label">About</span> </a> </li>
etc etc on the other code sections/ nav sections ??? I guess that would solve the problem

You can do this for the active class (much like #Sachink suggested):
var $navLinks = $('#cd-vertical-nav a');
$navLinks.on('click', function(){
$navLinks.removeClass('is-selected');
$(this).addClass('is-selected');
});
For the scrolling, you need to watch the scroll position in each of your <section>s and when the scrollTop matches a section, set the corresponding menu item's class to is-selected like this:
var windowHeight = $(window).height();
$('section').each(function(){
var $this = $(this);
$(document).scroll(function(){
var scrollTop = $(window).scrollTop();
var offset = $this.offset().top;
var height = $this.outerHeight();
if (offset + height <= scrollTop || offset >= scrollTop + (windowHeight - (height / 2))) {
return;
}
var selector = '[href="#' + $this.prop('id') + '"]';
var $menuItem = $navLinks.filter(selector);
$navLinks.removeClass('is-selected');
$menuItem.addClass('is-selected');
});
});
You can see a working example here: http://jsfiddle.net/5w2bkd6k/2/

You need to add following jQuery code:
<script>
$(document).ready(function(){
$('nav li a').click(function(){
$('nav li a').removeClass('is-selected');
$(this).addClass('is-selected');
})
});
</script>
See fiddle : http://jsfiddle.net/sachinkk/5w2bkd6k/1/
OR
I suggest you to use following code for smooth scrolling
$(document).ready(function(){
$('nav li a').click(function(){
$('nav li a').removeClass('is-selected');
$(this).addClass('is-selected');
event.preventDefault();
var toGo = $(this).attr('href');
$('html, body').animate({
scrollTop: $(toGo).offset().top
}, 1000);
})
});

Creating a sticky footer

http://codepen.io/RobbyT15/pen/otyfw/
I'm working on a site design, and I'm trying to make a dynamic footer that stays at the bottom of the window regardless of the screen size. Using the fixed attribute in CSS doesn't work as it doesn't scroll with the page. I've done something similar with a floating div, however, when I tried to incorporate it with the footer, it doesn't work. I've looked around at the other similar questions, but each of them say to add the position: fixed CSS rule. Any suggestions?
Edit* I made the changes everyone suggested, however, The footer it not "attaching itself to the bottom of the window. I'm sorry I'm being such a pain with this.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Robert Thompson</title>
<link rel="stylesheet" href="styles/desktop.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="includes/init.js"></script>
<script type="text/javascript" src="includes/main.js"></script>
</head>
<body>
<div id="main">
<header></header>
<div id="content">
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
<footer></footer>
</div>
</body>
</html>
CSS
body{
position: relative;
margin: 0;
padding: 0;
background-color: #757575;
color: #FFFFFF;
z-index: 0;
}
header, footer{
position: relative;
display: block;
width: 100%;
height: 50px;
background-color: #000000;
z-index: 2;
}
header{
border-bottom: 3px inset #DDAA00;
}
footer{
border-top: 3px outset #DDAA00;
}
#main{
position: absolute;
background-color: red;
z-index: 1;
}
#content{
position: relative;
left: 250px;
width: 70%;
z-index: 1;
}

You would need to use position relative, and absolute. So to your container (the body of the page) add position: relative and then to your footer you would add position: absolute no need for margining. Also look into CSS Sticky Footer as TylerH pointed you too.

Take a look at this: http://codepen.io/sheriffderek/pen/ziGbE
It's a combination of the few sticky footer options out there - and some optional javascript to adjust dynamically depending on the footer's actual content (which might be different at different screen sizes)

Develop Reference

JavaScript is the programming language of the Web.