We Keep Coding

Fixed page header overlapsing anchors on page

When I click on any of my anchor links my header is overlapsing the actual content of the section. Is it possible to have it move the top of the section?
I've been looking for some solutions already but they're not working out for me.
I tried to add an anchor class to the sections and I also tried scroll-margin-top but it didn't quite work out.
//header Effekt beim scrollen
$(function() {
var shrinkHeader = 100;
$(window).scroll(function() {
var scroll = getCurrentScroll();
if (scroll >= shrinkHeader) {
$('#navbar').addClass('shrink');
} else {
$('#navbar').removeClass('shrink');
}
});
function getCurrentScroll() {
return window.pageYOffset || document.documentElement.scrollTop;
}
});
// JavaScript Document
$(document).ready(function(){
var navTop = $('#navbar').offset().top;
var navHeight = $('#navbar').height();
var windowH = $(window).height();
$('.section').height(windowH);
$(document).scroll(function(){
var st = $(this).scrollTop();
//for the nav bar:
if(st > navTop ){
$('#navbar').addClass('fix');
$('.section:eq(0)').css({'margin-top':navHeight});//fix scrolling issue due to the fix nav bar
}else{
$('#navbar').removeClass('fix');
$('.section:eq(0)').css({'margin-top':'0'});
}
$('.section').each(function(index, element) {
if(st + navHeight > $(this).offset().top && st + navHeight <= $(this).offset().top + $(this).height() ){
$(this).addClass('active');
var id = $(this).attr('id');
$('a[href="#'+id+'"]').parent('li').addClass('active');
// or $('#nav li:eq('+index+')').addClass('active');
}else{
$(this).removeClass('active');
var id = $(this).attr('id');
$('a[href="#'+id+'"]').parent('li').removeClass('active');
//or $('#nav li:eq('+index+')').removeClass('active');
}
});
});
});
//
#charset "utf-8";
/* CSS Document */
* {
font-family: 'Roboto', sans-serif;
}
#container {
background-color: white;
width: 1280px;
height: 4000px;
margin-left: auto;
margin-right: auto;
}
body {
background-color: grey;
margin: 0px;
}
/* Navigation */
ul {
color: black;
list-style: none;
float: right;
margin-right: 20px;
padding-top: 32px;
}
ul li {
display: inline-table;
margin-left: 5px;
padding: 5px;
border-bottom: 1.5px solid;
border-bottom-color: white;
}
ul li a {
color: black;
text-decoration: none;
padding: 10px;
}
/* Smart Navbar / weiß, wo man auf der Seite ist von https://stackoverflow.com/questions/19697696/change-underline-of-active-nav-by-section */
#navbar.fix {
position: fixed;
top: 0;
}
#navbar li.active {
border-bottom: 1.5px solid;
border-bottom-color: #f6bd60;
}
/* Smart Navbar Ende */
/* fixed Navigation von https://codepen.io/malZiiirA/pen/cbfED?css-preprocessor=none */
#navbar {
border-bottom-style: solid;
border-bottom-width: 1.25px;
box-shadow: 0px 2.5px 5px rgba(0, 0, 0, 0.2);
background-color: white;
height: 128px;
transition: 0.32s;
position: fixed;
width: 1280px;
}
#navbar.shrink {
height: 80px;
line-height: 18px;
}
#navbar li {
font-size: 1.2rem;
font-weight: normal;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
#navbar.shrink li {
font-size: 1.2rem;
margin-top: -30px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
/* fixed nav Ende */
/*
#spacer {
height: 128px;
border-bottom: 4px solid;
}
*/
#Home {
margin-top: 0 !important;
border: solid;
height: 1000px;
}
#UberUns {
height: 1000px;
border-style: solid;
}
#Aktionen {
height: 1000px;
border-style: solid;
}
#Terminvereinbarung {
height: 1000px;
border-style: solid;
}
#Infos {
height: 1000px;
border-style: solid;
}
/* Hover Effekt bei Navigation von https://github.com/IanLunn/Hover/blob/master/css/hover.css */
.hvr-sweep-to-top {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-sweep-to-top:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #f6bd60;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sweep-to-top:hover,
.hvr-sweep-to-top:focus,
.hvr-sweep-to-top:active {
color: white;
}
.hvr-sweep-to-top:hover:before,
.hvr-sweep-to-top:focus:before,
.hvr-sweep-to-top:active:before {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
/* Hover Effekt Ende */
/* Loader */
.loader {
display: inline-block;
width: 30px;
height: 30px;
position: relative;
border: 4px solid #Fff;
animation: loader 2s infinite ease;
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: #fff;
animation: loader-inner 2s infinite ease-in;
}
#keyframes loader {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes loader-inner {
0% {
height: 0%;
}
25% {
height: 0%;
}
50% {
height: 100%;
}
75% {
height: 100%;
}
100% {
height: 0%;
}
}
.loader-wrapper {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #242f3f;
display: flex;
align-items: center;
justify-content: center;
}
/* loader Ende */
<!DOCTYPE html>
<html>
<head>
<title>OptikTack</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<div id="container">
<div class="body">
<nav id="navbar">
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="javascript/navbar fixed.js"></script>
<ul>
<li class="hvr-sweep-to-top active">Home</li>
<li class="hvr-sweep-to-top">Wir über uns</li>
<li class="hvr-sweep-to-top">Aktionen</li>
<li class="hvr-sweep-to-top">Terminvereinbarung</li>
<li class="hvr-sweep-to-top">Infos</li>
</ul>
</nav>
<a id="top"></a>
<div id="spacer"></div>
<!-- home section -->
<section id="Home" class="section">
<div>
</div>
</section>
<!-- UberUns section -->
<section id="UberUns" class="section">
<div>
<p>section 2</p>
</div>
</section>
<!-- Aktionen section -->
<section id="Aktionen" class="section">
<div>
<p>section 3</p>
</div>
</section>
<!-- Terminvereinbarung section -->
<section id="Terminvereinbarung" class="section">
<div>
<p>section 4</p>
</div>
</section>
<!-- Infos section -->
<section id="Infos" class="section">
<div>
<p>section 5</p>
</div>
</section>
</div>
</div>
<div class="loader-wrapper">
<span class="loader"><span class="loader-inner"></span></span>
</div>
<script>
$(window).on("load", function() {
$(".loader-wrapper").fadeOut("slow");
});
</script>
<script>
$('a').click(function() {
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 500);
return false;
});
</script>
</body>
</html>

Try this please in your css code:
I just added top:0 to your navbar code and added margin-top to the next element in html, which is the section. I don't think the spacer div is necessary.
#navbar {
border-bottom-style: solid;
border-bottom-width: 1.25px;
box-shadow: 0px 2.5px 5px rgba(0, 0, 0, 0.2);
background-color: white;
height: 128px;
transition: 0.32s;
position: fixed;
top:0;
width: 1280px;
}
body {
margin-top: 128px;
}

How make Javascript code work for each element individually, to create multiple duplicates in HTML with same Javascript code

I have created a simple image carousel that I am using on my site.
It all works well until I only have one but as soon as I try to create a new one it doesn't work properly.
All I need is that all the image sliders I create are independent of each other.
Both of the sliders should work individually.
Any help would be very great.
Here is my code:
//current position
var pos = 0;
//number of slides
var totalSlides = $('.slider-wrap ul li').length;
//get the slide width
var sliderWidth = $('.slider-wrap').width();
$(document).ready(function(){
/*****************
BUILD THE SLIDER
*****************/
//set width to be 'x' times the number of slides
$('.slider-wrap ul.slider').width(sliderWidth*totalSlides);
//next slide
$('.next').click(function(){
slideRight();
});
//previous slide
$('.previous').click(function(){
slideLeft();
});
/*************************
//*> OPTIONAL SETTINGS
************************/
//automatic slider
var autoSlider = setInterval(slideRight, 3000);
//for each slide
$.each($('.slider-wrap ul li'), function() {
//set its color
var c = $(this).attr("data-color");
$(this).css("background",c);
//create a pagination
var li = document.createElement('li');
$('.pagination-wrap ul').append(li);
});
//counter
countSlides();
//pagination
pagination();
//hide/show controls/btns when hover
//pause automatic slide when hover
$('.slider-wrap').hover(
function(){ $(this).addClass('active'); clearInterval(autoSlider); },
function(){ $(this).removeClass('active'); autoSlider = setInterval(slideRight, 3000); }
);
});//DOCUMENT READY
/***********
SLIDE LEFT
************/
function slideLeft(){
pos--;
if(pos==-1){ pos = totalSlides-1; }
$('.slider-wrap ul.slider').css('left', -(sliderWidth*pos));
//*> optional
countSlides();
pagination();
}
/************
SLIDE RIGHT
*************/
function slideRight(){
pos++;
if(pos==totalSlides){ pos = 0; }
$('.slider-wrap ul.slider').css('left', -(sliderWidth*pos));
//*> optional
countSlides();
pagination();
}
/************************
//*> OPTIONAL SETTINGS
************************/
function countSlides(){
$('.counter').html(pos+1 + ' / ' + totalSlides);
}
function pagination(){
$('.pagination-wrap ul li').removeClass('active');
$('.pagination-wrap ul li:eq('+pos+')').addClass('active');
}
/*GLOBALS*/
* {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
color: #666;
}
a:hover {
color: #1bc1a3;
}
body,
hmtl {
background: #ecf0f1;
font-family: 'Anton', sans-serif;
}
.wrapper {
width: 600px;
margin: 50px auto;
height: 400px;
position: relative;
color: #fff;
text-shadow: rgba(0, 0, 0, 0.1) 2px 2px 0px;
}
.slider-wrap {
width: 600px;
height: 400px;
position: relative;
overflow: hidden;
}
.slider-wrap ul.slider {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.slider-wrap ul.slider li {
float: left;
position: relative;
width: 600px;
height: 400px;
}
.slider-wrap ul.slider li > div {
position: absolute;
top: 20px;
left: 35px;
}
.slider-wrap ul.slider li > div h3 {
font-size: 36px;
text-transform: uppercase;
}
.slider-wrap ul.slider li > div span {
font-family: Neucha, Arial, sans serif;
font-size: 21px;
}
.slider-wrap ul.slider li i {
text-align: center;
line-height: 400px;
display: block;
width: 100%;
font-size: 90px;
}
.object-fit_contain {
object-fit: contain;
height: auto;
max-width: 600px;
}
/*btns*/
.btns {
position: absolute;
width: 50px;
height: 60px;
top: 50%;
margin-top: -25px;
line-height: 57px;
text-align: center;
cursor: pointer;
z-index: 100;
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-ms-user-select: none;
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
-o-transition: all 0.1s ease;
-ms-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.next {
right: -1px;
margin-right: 200px;
}
.previous {
left: -1px;
margin-left: 200px;
}
.counter {}
.slider-wrap.active .next {
right: 0px;
}
.slider-wrap.active .previous {
left: 0px;
}
/*bar*/
.pagination-wrap {
min-width: 20px;
margin-top: 350px;
margin-left: auto;
margin-right: auto;
height: 15px;
position: relative;
text-align: center;
}
.pagination-wrap ul {
width: 100%;
}
.pagination-wrap ul li {
margin: 0 4px;
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
background: #3ab8cb;
opacity: 0.5;
position: relative;
top: 0;
}
.pagination-wrap ul li.active {
width: 12px;
height: 12px;
top: 3px;
opacity: 1;
box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 0px;
}
/*Header*/
h1,
h2 {
text-shadow: none;
text-align: center;
}
h1 {
color: #666;
text-transform: uppercase;
font-size: 36px;
}
h2 {
color: #7f8c8d;
font-family: Neucha, Arial, sans serif;
font-size: 18px;
margin-bottom: 30px;
}
/*ANIMATION*/
.slider-wrap ul,
.pagination-wrap ul li {
-webkit-transition: all 0.3s cubic-bezier(1, .01, .32, 1);
-moz-transition: all 0.3s cubic-bezier(1, .01, .32, 1);
-o-transition: all 0.3s cubic-bezier(1, .01, .32, 1);
-ms-transition: all 0.3s cubic-bezier(1, .01, .32, 1);
transition: all 0.3s cubic-bezier(1, .01, .32, 1);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- ########################### Slider 1 ##########################-->
<div class="slider-wrap">
<ul class="slider">
<li>
<img class="object-fit_contain" src="http://www.spiritanimal.info/wp-content/uploads/Lion-Spirit-Animal-1.jpg">
</li>
<li>
<img class="object-fit_contain" src="https://cdn.images.express.co.uk/img/dynamic/galleries/x701/156708.jpg">
</li>
</ul>
<!--controls-->
<div class="pagination-wrap">
<div class="btns next"><i class="fas fa-greater-than"></i></div>
<div class="counter"></div>
<div class="btns previous"><i class="fas fa-less-than"></i></div>
</div>
<!--controls-->
</div>
<!-- ########################### Slider 2 ##########################-->
<div class="slider-wrap">
<ul class="slider">
<li>
<img class="object-fit_contain" src="http://www.spiritanimal.info/wp-content/uploads/Lion-Spirit-Animal-1.jpg">
</li>
<li>
<img class="object-fit_contain" src="https://cdn.images.express.co.uk/img/dynamic/galleries/x701/156708.jpg">
</li>
</ul>
<!--controls-->
<div class="pagination-wrap">
<div class="btns next"><i class="fas fa-greater-than"></i></div>
<div class="counter"></div>
<div class="btns previous"><i class="fas fa-less-than"></i></div>
</div>
<!--controls-->
</div>

You have multiple elements with the same ID. You will need to update your code to work off of class and "closest" related items if you need multiples of these on a single page.
For example, where you click "previous", you might need to change to something like:
//previous slide
$('.previous').click(function(event){
slideLeft(event.target); // to pass the clicked 'previous' button to slideLeft()
});
Then in your slideLeft() function, find the slider by whichever one is ancestrally closest to the clicked button:
function slideLeft(target){
pos--;
if(pos==-1){ pos = totalSlides-1; }
$(target).closest('.slider').css('left', -(sliderWidth*pos)); // only line I changed in your example
//*> optional
countSlides();
pagination();
}
I did not run this fully but the concept of "know which one is clicked, then find what to update from there" is what you're going for I believe.

How opacify background of header with scrolling

I'm looking to opacify the background color of my navbar during the scroll.
My Navbar is in the Header Div.
Actually, When I scroll my navbar is mixed with the content and I can't read anything.
I tried a lot of tutorials but my knowledge is poor in javascript and nothing works.
I just want the background header is opacity 0 when we are on the top of the page and become 0.7 when we scroll.
Thanks for your help.
/*sticky_navbar*/
window.onscroll = function() {
myFunction()
};
var navbar = document.getElementById("header");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
$(window).scroll(function() {
var threshold = 200; // number of pixels before bottom of page that you want to start fading
var op = (($(document).height() - $(window).height()) - $(window).scrollTop()) / threshold;
if (op <= 0) {
$("#header").hide();
} else {
$("#header").show();
}
$("#header").css("opacity", op);
});
#header {
display: flex;
justify-content: flex-end;
background: rgba(139, 139, 157, 0.7);
z-index: 2;
}
.navbar {}
#Title {
margin: 0 auto 0 0;
height: 20px;
margin-top: 15px;
padding-left: 10px;
border-bottom: 1px solid white;
padding-top: 5px;
padding-bottom: 30px;
flex: 1;
}
#navbar {
overflow: hidden;
display: flex;
justify-content: flex-end;
border-bottom: 5px solid white;
padding-bottom: 10px;
padding-top: 15px;
}
.menu:nth-child(1) {
order: 1;
}
.menu:nth-child(2) {
order: 4;
}
.menu:nth-child(3) {
order: 3;
}
.menu:nth-child(4) {
order: 2;
}
.menu:nth-child(5) {
order: 5;
}
IMG.background {
display: block;
margin-left: auto;
margin-right: auto;
z-index: 1;
width: 60%;
}
#navbar a {
display: block;
color: #FFF;
text-align: center;
padding: 10px 16px;
text-decoration: none;
font-size: 17px;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
#navbar a.active {
background: rgba(217, 78, 68, 0.5);
color: white;
}
.content {
padding: 16px;
color: #ddd;
background-color: #FFF
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky+.content {
padding-top: 60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header" class="navbar">
<div id="Title">
<img src="IMAGES/PNG/logo.png" alt="logo" />
</div>
<div id="navbar">
<div class="menu"> <a class="active" href="javascript:void(0)">Blog</a></div>
<div class="menu"> Contact</div>
<div class="menu"> L'électrophotonique</div>
<div class="menu"> Qui sommes nous?</div>
</div>
</div>

Along with what Mattia said, I have created a pen. I hope this helps.
I also added a css transition so it fades, but that was just a matter of personal preference. You can definitely remove that if you like.
CODEPEN
The changes are as follows:
css
#header {
display: flex;
justify-content: flex-end;
background: rgba(139, 139, 157, 0);
-webkit-transition: background 0.5s ease-in-out;
-moz-transition: background 0.5s ease-in-out;
-ms-transition: background 0.5s ease-in-out;
-o-transition: background 0.5s ease-in-out;
transition: background 0.5s ease-in-out;
z-index: 2;
position: fixed;
top: 0;
left: 0;
right: 0;
}
#header.isSticky {
background: rgb(139, 139, 157, 0.7);
-webkit-transition: background 0.5s ease-in-out;
-moz-transition: background 0.5s ease-in-out;
-ms-transition: background 0.5s ease-in-out;
-o-transition: background 0.5s ease-in-out;
transition: background 0.5s ease-in-out;
}
js
$(document).ready(function(){// checks vertical position of scroll bar
var scrollY = $(this).scrollTop();
// when user refreshes psge
if (scrollY > 0) {
// if it is anywhere but the top change opacity by adding class .isSticky
$('#header').addClass('isSticky');
} else {
$('#header').removeClass('isSticky');
}
$(window).on('scroll', function(){
// while uesr scrolls check the scrollTop position
var scrollY = $(this).scrollTop();
if (scrollY > 0) {
$('#header').addClass('isSticky');
} else {
$('#header').removeClass('isSticky');
}
});
});

Just toggle a class (.isSticky for example) with js on scroll by checking the element offset top.
#header {
display: flex;
justify-content: flex-end;
background: rgba(139, 139, 157, 0);
z-index: 2;
}
#header.isSticky {
background: rgba(139, 139, 157, 0.7);
}

Wordpress change active class on bootstrap nav while hovering

I'm building a website using Wordpress. Most of the nav menu links, link to an id on the homepage. So when I load my site all the links that link to a place on the homepage are currently active. I removed the script in Wordpress that checks to see if its active. I figured I could use bootstrap scrollspy to get this done or even this JSFiddle https://jsfiddle.net/cse_tushar/Dxtyu/141/
The problem I'm having is since the navigation is being spit out by Wordpress I don't have the ability to go in and actually hard code "active" to the first li element and then do a add class and remove class. How would I alter the above JSFiddle so it does a hash target. So whenever I scroll and hit a div with the same ID as a nav item it triggers the active class and stays active until I hit another one or change pages. Here is what my nav looks like on wordpress.
<nav class="collapse navbar-collapse" role="navigation">
<ul id="menu-primary-navigation" class="nav navbar-nav">
<li class="current-menu-item current_page_item menu-about">About</li>
<li class="current-menu-item current_page_item menu-team">Team</li>
<li class="current-menu-item current_page_item menu-services">Services</li>
<li class="menu-services">Blog</li>
<li class="current-menu-item current_page_item menu-contact-us">Contact Us</li>
</ul>
</nav>
<div id="about">
Something Here
</div>
<div id="team">
Something Here
</div>

You can accomplish that by adding the following line at the beginning of page load:
$("ul li a:first").addClass('active');
$(document).ready(function () {
$(document).on("scroll", onScroll);
$("ul li a:first").addClass('active');
//smoothscroll
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('#menu-center a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('#menu-center ul li a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.menu {
width: 100%;
height: 75px;
background-color: rgba(0, 0, 0, 1);
position: fixed;
background-color:rgba(4, 180, 49, 0.6);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.light-menu {
width: 100%;
height: 75px;
background-color: rgba(255, 255, 255, 1);
position: fixed;
background-color:rgba(4, 180, 49, 0.6);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#menu-center {
width: 980px;
height: 75px;
margin: 0 auto;
}
#menu-center ul {
margin: 15px 0 0 0;
}
#menu-center ul li {
list-style: none;
margin: 0 30px 0 0;
display: inline;
}
.active {
font-family:'Droid Sans', serif;
font-size: 14px;
color: #fff;
text-decoration: none;
line-height: 50px;
}
a {
font-family:'Droid Sans', serif;
font-size: 14px;
color: black;
text-decoration: none;
line-height: 50px;
}
#home {
background-color: grey;
height: 100%;
width: 100%;
overflow: hidden;
background-image: url(images/home-bg2.png);
}
#portfolio {
background-image: url(images/portfolio-bg.png);
height: 100%;
width: 100%;
}
#about {
background-color: blue;
height: 100%;
width: 100%;
}
#contact {
background-color: red;
height: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<div class="m1 menu">
<div id="menu-center">
<ul>
<li>Home
</li>
<li>Portfolio
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</div>
<div id="home"></div>
<div id="portfolio"></div>
<div id="about"></div>
<div id="contact"></div>

CSS3 transition not working on JS scrollup fixed div transition

I was trying a javascript function to fix a part of header on scrollup. It's working fine but I want to make the movement of fixed part smooth by adding transition property of CSS3. I tried but its not working. Request your help plz.
window.onscroll = myFunction;
function myFunction() {
if(document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
document.getElementById("hdr_nav").style.position = "fixed";
} else {
document.getElementById("hdr_nav").style.position = "";
}
}//end function
*{margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; }
body {height: 3000px;}
.hdr_box {float: left; width: 100%; height: 65px; background: #eff1f2; position: relative; padding: 0; margin: 0;}
.hdr_box > .row1 {
float: left;
width: 100%;
height: 20px;
padding: 15px;
}
nav {
float: left;
width: 100%;
height: auto;
background: #e4e6e8;
position: relative;
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
}
nav ul {
list-style: none;
float: left;
width: 100%;
padding: 0;
margin: 0;
}
nav ul li {
float: left;
width: auto;
border-right: solid 1px #cacaca;
}
nav ul li a {
float: left;
width: auto;
padding: 16px;
text-align: center;
font-size: 14px;
}
<div class="hdr_box" id="hdr">
<div class="row1" id="hdr_row1"><h3>CompanyName</h3></div>
</div>
<nav id="hdr_nav">
<ul>
<li>About Us</li>
<li>Business</li>
<li>Our Work</li>
<li>Challenges</li>
</ul>
</nav>

That is because you change the position property from absolute to fixed and that can't be animated / transitioned. Transitions only work for properties with a unit, eg. px, rem, %, or stuff like opacity.
You can fix it however with a keyframe animation:
nav.is-fixed {
position: fixed;
animation: scroll .5s ease-out;
}
#keyframes scroll {
from {
transform: tranlateY(-100%);
}
to {
transform: tranlateY(0%);
}
}
Make sure to prefix #keyframes and transform if needed.
And a little change to the JS:
window.onscroll = myFunction;
function myFunction() {
var scrollAmount = document.body.scrollTop || document.documentElement.scrollTop;
var nav = document.getElementById("hdr_nav");
if(scrollAmount > 200) {
nav.classList.add('is-fixed');
} else {
nav.classList.remove('is-fixed');
}
}
https://jsfiddle.net/41nspon8/3/

add new CSS rule
.nav-fixed {
position: fixed;
-webkit-animation: slideInDown 450ms 1 ease-in-out;
}
#-webkit-keyframes slideInDown {
from {transform: translate(0%, -100%); }
to {transform: translate(0%, 0%); }
}
modify your js code
//document.getElementById("hdr_nav").style.position = "fixed";
document.getElementById("hdr_nav").classList.add("nav-fixed");
} else {
//document.getElementById("hdr_nav").style.position = "";
document.getElementById("hdr_nav").classList.remove("nav-fixed");
https://jsfiddle.net/13m8u7xm/