<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!--Start Nav--> <ul class="navbar"> <li><a href="#" data-scroll="Home">Home</a></li> <li><a href="#" data-scroll="About-Us">About Us</a></li> <li><a href="#" data-scroll="Services">Services</a></li> <li><a href="#" data-scroll="Products">Products</a></li> <li><a href="#" data-scroll="Contact-Us">Contact Us</a></li> </ul> <!--End Nav--> <!--Start Section Option Box--> <section class="fixed-menu"> <i class="fa fa-cog" "></i> <div class="color-option"> <h4> Color Change </h4> <ul class="list-unstyled change-color"> <li data-color="red"></li> <li data-color="blue"></li> <li data-color="yellow"></li> <li data-color="green"></li> <li data-color="purple"></li> </ul> </div> <div class="color-option"> <h4> Font Size </h4> </div> <div class="color-option"> <h4>Languages</h4> </div> </section> <!--End Section Option Box--> <!--Start Section--> <div id="Home" class="block"> <h2> Home </h2> </div> <div id="About-Us" class="block"> <h2> About Us </h2> </div> <div id="Services" class="block"> <h2> Services </h2> </div> <div id="Products" class="block"> <h2> Products </h2> </div> <div id="Contact-Us" class="block"> <h2> Contact Us </h2> </div> <!---End Section---> <!---srart scroll To Top---> <a class="scroll-top" href="#"> <i class="fas fa-chevron-up"></i> </a> <!---End scroll To Top--->

*{ margin: 0; padding: 0 } body{ font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } /* Start Scroll TO Top*/ .scroll-top{ background-color: #333; color: white; display: inline-block; padding:2px 5px; position: fixed; bottom: 10px; right: 10px; display: none } /* End Scroll TO Top*/ /*-Start Nav--*/ .navbar{ list-style: none; margin: 0; padding:5px; background-color: rgba(0, 0, 0,.7); text-align: center; position: fixed; top: 0; width: 100% } .navbar li{ display: inline-block; padding: 10px } .navbar li a{ color: #eee; text-decoration: none } .navbar li a.active { color: #ffea00; } /*-End Nav--*/ /*-- Start Fixed Menu--*/ .fixed-menu{ background-color: #333; color: #eee; position: fixed; padding: 10px; left:-240px; top: 0; height: 100%; width: 220px; z-index: 9999; } .fixed-menu .fa-cog{ font-size: 20px; position: absolute; top: 100px; right: -30px; background-color: #333; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 0 10px 10px 0; cursor: pointer; } /*-- End Fixed Menu--*/ /* start section*/ .block{ height: 600px; background-color: #eee; margin-bottom: 20px; padding: 60px 0; text-align: center } /* End section*/

$(function(){ 'use strict'; //Calculate Body Padding// $('body').css('paddingTop',$('.navbar').innerHeight()); //Scroll To Element// $('.navbar li a').click(function(e){ e.preventDefault(); $('html,body').animate({ scrollTop:$('#' + $(this).data('scroll')).offset().top+1 },2000); }); //Add Active Class// $('.navbar li a').click(function(){ // $('.navbar a').removeClass('active'); // $(this).addClass('active');// $(this).addClass('active').parent().siblings().find('a').removeClass('active'); }); //Sync navbar With Sections// $(window).scroll(function(){ $('.block').each(function(){ if($(window).scrollTop() > $(this).offset().top){ console.log($(this).attr('id')); var blockID = $(this).attr('id'); $('.navbar a').removeClass('active'); $('.navbar li a[data-scroll="' +blockID+ '"]').addClass('active'); } }); }); //Scroll To Top Button// var scrolltotop=$(".scroll-top"); $(window).scroll(function(){ if($(window).scrollTop() >= 1000){ console.log("Passed 1000px"); scrolltotop.fadeIn(); }else{ scrolltotop.fadeOut(); } }); scrolltotop.click(function(e){ e.preventDefault(); $('html,body').animate({ scrollTop:0 },2000); }); // Fixed Menu // console.log("The Inner Of Fixed Menu Is" +" "+ $('.fixed-menu').innerWidth()); $('.fixed-menu .fa-cog').click(function(){ var fix = $(this).parent('.fixed-menu') fix.toggleClass('is-visible'); if (fix.hasClass('is-visible')){ $(fix).animate({ left:0 }); $('body').animate({ paddingLeft:'240px' }); }else{ $(fix).animate({ left:-$('.fixed-menu').innerWidth() }); $('body').animate({ paddingLeft:'0' }); } }); });