Sticky Menu with VanillaJS

Developer
Felquis
Size
4,836 Kb
Views
14,168
  1. Sticky Menu with VanillaJS Previews
  2. Sticky Menu with VanillaJS HTML Codes
  3. Sticky Menu with VanillaJS CSS Codes
  4. Sticky Menu with VanillaJS JS Codes

How do I make an sticky menu with vanillajs?

What is a sticky menu with vanillajs? How do you make a sticky menu with vanillajs? This script and codes were developed by Felquis on 08 December 2022, Thursday.

Sticky Menu with VanillaJS Previews
IQ Test

Sticky Menu with VanillaJS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sticky Menu with VanillaJS</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url("https://fonts.googleapis.com/css?family=HammersmithOne");
.menu-wrapper { background: #ecf0f1; background: linear-gradient(top, #ecf0f1, #ecf0f1) no-repeat; width: 100%; height: 100px; display: flex; flex-direction: row; align-items: center; justify-content: center; border: 1px solid #bdc3c7; transition: height 0.2s linear; position: absolute; top: 85px; left: 0;
}
.menu-wrapper-shadow { height: 200px; position: relative; display: block;
}
.menu-wrapper.fixed { height: 50px;
}
.menu { list-style: none; padding: 0; margin: 0; overflow: hidden; height: 100%;
}
.menu-item { float: left; font-family: 'Hammersmith One', sans-serif; height: 100%;
}
.menu-item a { height: 100%; padding: 0 50px; text-shadow: 1px 1px 0px #fff; color: #7f8c8d; text-decoration: none; display: flex; flex-direction: row; align-items: center; justify-content: center; transition: all 0.2s linear;
}
.menu-wrapper.fixed .menu-item a { padding: 0 20px;
}
.menu-item a:hover { background: #dcdddd;
}
.fixed { position: fixed; top: 0; left: 0;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<div class="menu-wrapper-shadow"></div>
<nav class="menu-wrapper"> <ul class="menu"> <li class="menu-item"><a href="https://github.com/felquis"><span>GitHub</span></a></li> <li class="menu-item"><a href="https://twitter.com/felquis"><span>Twitter</span></a></li> <li class="menu-item"><a href="https://codepen.io/felquis/pen/cLJCI"><span>Edit</span></a></li> </ul>
</nav>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales, libero et fermentum pulvinar, purus eros varius libero, ac tempor dolor nisl sed risus. Vestibulum pretium tortor lorem, sed tristique augue rhoncus eu. Morbi dignissim vel tortor dictum auctor. Vivamus tortor massa, laoreet a ornare at, scelerisque ultricies sem. Phasellus ut ullamcorper ipsum, ut consequat turpis. Nulla mi leo, sagittis ut varius et, commodo a justo. Nullam ac risus pellentesque, tristique neque eu, vehicula nibh. Vivamus euismod ipsum fringilla lectus luctus mollis. Quisque imperdiet lacus id tellus dictum, vitae vehicula metus viverra. Nulla vitae ligula vel nulla mollis vulputate. In nisi erat, pretium a eros in, sagittis rhoncus lorem. Aenean tincidunt ligula posuere libero elementum, ac vestibulum augue tincidunt. Pellentesque eget velit erat. Duis a erat ligula. In id eros a neque tristique vestibulum.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales, libero et fermentum pulvinar, purus eros varius libero, ac tempor dolor nisl sed risus. Vestibulum pretium tortor lorem, sed tristique augue rhoncus eu. Morbi dignissim vel tortor dictum auctor. Vivamus tortor massa, laoreet a ornare at, scelerisque ultricies sem. Phasellus ut ullamcorper ipsum, ut consequat turpis. Nulla mi leo, sagittis ut varius et, commodo a justo. Nullam ac risus pellentesque, tristique neque eu, vehicula nibh. Vivamus euismod ipsum fringilla lectus luctus mollis. Quisque imperdiet lacus id tellus dictum, vitae vehicula metus viverra. Nulla vitae ligula vel nulla mollis vulputate. In nisi erat, pretium a eros in, sagittis rhoncus lorem. Aenean tincidunt ligula posuere libero elementum, ac vestibulum augue tincidunt. Pellentesque eget velit erat. Duis a erat ligula. In id eros a neque tristique vestibulum.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales, libero et fermentum pulvinar, purus eros varius libero, ac tempor dolor nisl sed risus. Vestibulum pretium tortor lorem, sed tristique augue rhoncus eu. Morbi dignissim vel tortor dictum auctor. Vivamus tortor massa, laoreet a ornare at, scelerisque ultricies sem. Phasellus ut ullamcorper ipsum, ut consequat turpis. Nulla mi leo, sagittis ut varius et, commodo a justo. Nullam ac risus pellentesque, tristique neque eu, vehicula nibh. Vivamus euismod ipsum fringilla lectus luctus mollis. Quisque imperdiet lacus id tellus dictum, vitae vehicula metus viverra. Nulla vitae ligula vel nulla mollis vulputate. In nisi erat, pretium a eros in, sagittis rhoncus lorem. Aenean tincidunt ligula posuere libero elementum, ac vestibulum augue tincidunt. Pellentesque eget velit erat. Duis a erat ligula. In id eros a neque tristique vestibulum.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales, libero et fermentum pulvinar, purus eros varius libero, ac tempor dolor nisl sed risus. Vestibulum pretium tortor lorem, sed tristique augue rhoncus eu. Morbi dignissim vel tortor dictum auctor. Vivamus tortor massa, laoreet a ornare at, scelerisque ultricies sem. Phasellus ut ullamcorper ipsum, ut consequat turpis. Nulla mi leo, sagittis ut varius et, commodo a justo. Nullam ac risus pellentesque, tristique neque eu, vehicula nibh. Vivamus euismod ipsum fringilla lectus luctus mollis. Quisque imperdiet lacus id tellus dictum, vitae vehicula metus viverra. Nulla vitae ligula vel nulla mollis vulputate. In nisi erat, pretium a eros in, sagittis rhoncus lorem. Aenean tincidunt ligula posuere libero elementum, ac vestibulum augue tincidunt. Pellentesque eget velit erat. Duis a erat ligula. In id eros a neque tristique vestibulum.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales, libero et fermentum pulvinar, purus eros varius libero, ac tempor dolor nisl sed risus. Vestibulum pretium tortor lorem, sed tristique augue rhoncus eu. Morbi dignissim vel tortor dictum auctor. Vivamus tortor massa, laoreet a ornare at, scelerisque ultricies sem. Phasellus ut ullamcorper ipsum, ut consequat turpis. Nulla mi leo, sagittis ut varius et, commodo a justo. Nullam ac risus pellentesque, tristique neque eu, vehicula nibh. Vivamus euismod ipsum fringilla lectus luctus mollis. Quisque imperdiet lacus id tellus dictum, vitae vehicula metus viverra. Nulla vitae ligula vel nulla mollis vulputate. In nisi erat, pretium a eros in, sagittis rhoncus lorem. Aenean tincidunt ligula posuere libero elementum, ac vestibulum augue tincidunt. Pellentesque eget velit erat. Duis a erat ligula. In id eros a neque tristique vestibulum.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales, libero et fermentum pulvinar, purus eros varius libero, ac tempor dolor nisl sed risus. Vestibulum pretium tortor lorem, sed tristique augue rhoncus eu. Morbi dignissim vel tortor dictum auctor. Vivamus tortor massa, laoreet a ornare at, scelerisque ultricies sem. Phasellus ut ullamcorper ipsum, ut consequat turpis. Nulla mi leo, sagittis ut varius et, commodo a justo. Nullam ac risus pellentesque, tristique neque eu, vehicula nibh. Vivamus euismod ipsum fringilla lectus luctus mollis. Quisque imperdiet lacus id tellus dictum, vitae vehicula metus viverra. Nulla vitae ligula vel nulla mollis vulputate. In nisi erat, pretium a eros in, sagittis rhoncus lorem. Aenean tincidunt ligula posuere libero elementum, ac vestibulum augue tincidunt. Pellentesque eget velit erat. Duis a erat ligula. In id eros a neque tristique vestibulum.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales, libero et fermentum pulvinar, purus eros varius libero, ac tempor dolor nisl sed risus. Vestibulum pretium tortor lorem, sed tristique augue rhoncus eu. Morbi dignissim vel tortor dictum auctor. Vivamus tortor massa, laoreet a ornare at, scelerisque ultricies sem. Phasellus ut ullamcorper ipsum, ut consequat turpis. Nulla mi leo, sagittis ut varius et, commodo a justo. Nullam ac risus pellentesque, tristique neque eu, vehicula nibh. Vivamus euismod ipsum fringilla lectus luctus mollis. Quisque imperdiet lacus id tellus dictum, vitae vehicula metus viverra. Nulla vitae ligula vel nulla mollis vulputate. In nisi erat, pretium a eros in, sagittis rhoncus lorem. Aenean tincidunt ligula posuere libero elementum, ac vestibulum augue tincidunt. Pellentesque eget velit erat. Duis a erat ligula. In id eros a neque tristique vestibulum.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales, libero et fermentum pulvinar, purus eros varius libero, ac tempor dolor nisl sed risus. Vestibulum pretium tortor lorem, sed tristique augue rhoncus eu. Morbi dignissim vel tortor dictum auctor. Vivamus tortor massa, laoreet a ornare at, scelerisque ultricies sem. Phasellus ut ullamcorper ipsum, ut consequat turpis. Nulla mi leo, sagittis ut varius et, commodo a justo. Nullam ac risus pellentesque, tristique neque eu, vehicula nibh. Vivamus euismod ipsum fringilla lectus luctus mollis. Quisque imperdiet lacus id tellus dictum, vitae vehicula metus viverra. Nulla vitae ligula vel nulla mollis vulputate. In nisi erat, pretium a eros in, sagittis rhoncus lorem. Aenean tincidunt ligula posuere libero elementum, ac vestibulum augue tincidunt. Pellentesque eget velit erat. Duis a erat ligula. In id eros a neque tristique vestibulum.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales, libero et fermentum pulvinar, purus eros varius libero, ac tempor dolor nisl sed risus. Vestibulum pretium tortor lorem, sed tristique augue rhoncus eu. Morbi dignissim vel tortor dictum auctor. Vivamus tortor massa, laoreet a ornare at, scelerisque ultricies sem. Phasellus ut ullamcorper ipsum, ut consequat turpis. Nulla mi leo, sagittis ut varius et, commodo a justo. Nullam ac risus pellentesque, tristique neque eu, vehicula nibh. Vivamus euismod ipsum fringilla lectus luctus mollis. Quisque imperdiet lacus id tellus dictum, vitae vehicula metus viverra. Nulla vitae ligula vel nulla mollis vulputate. In nisi erat, pretium a eros in, sagittis rhoncus lorem. Aenean tincidunt ligula posuere libero elementum, ac vestibulum augue tincidunt. Pellentesque eget velit erat. Duis a erat ligula. In id eros a neque tristique vestibulum.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales, libero et fermentum pulvinar, purus eros varius libero, ac tempor dolor nisl sed risus. Vestibulum pretium tortor lorem, sed tristique augue rhoncus eu. Morbi dignissim vel tortor dictum auctor. Vivamus tortor massa, laoreet a ornare at, scelerisque ultricies sem. Phasellus ut ullamcorper ipsum, ut consequat turpis. Nulla mi leo, sagittis ut varius et, commodo a justo. Nullam ac risus pellentesque, tristique neque eu, vehicula nibh. Vivamus euismod ipsum fringilla lectus luctus mollis. Quisque imperdiet lacus id tellus dictum, vitae vehicula metus viverra. Nulla vitae ligula vel nulla mollis vulputate. In nisi erat, pretium a eros in, sagittis rhoncus lorem. Aenean tincidunt ligula posuere libero elementum, ac vestibulum augue tincidunt. Pellentesque eget velit erat. Duis a erat ligula. In id eros a neque tristique vestibulum.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales, libero et fermentum pulvinar, purus eros varius libero, ac tempor dolor nisl sed risus. Vestibulum pretium tortor lorem, sed tristique augue rhoncus eu. Morbi dignissim vel tortor dictum auctor. Vivamus tortor massa, laoreet a ornare at, scelerisque ultricies sem. Phasellus ut ullamcorper ipsum, ut consequat turpis. Nulla mi leo, sagittis ut varius et, commodo a justo. Nullam ac risus pellentesque, tristique neque eu, vehicula nibh. Vivamus euismod ipsum fringilla lectus luctus mollis. Quisque imperdiet lacus id tellus dictum, vitae vehicula metus viverra. Nulla vitae ligula vel nulla mollis vulputate. In nisi erat, pretium a eros in, sagittis rhoncus lorem. Aenean tincidunt ligula posuere libero elementum, ac vestibulum augue tincidunt. Pellentesque eget velit erat. Duis a erat ligula. In id eros a neque tristique vestibulum.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales, libero et fermentum pulvinar, purus eros varius libero, ac tempor dolor nisl sed risus. Vestibulum pretium tortor lorem, sed tristique augue rhoncus eu. Morbi dignissim vel tortor dictum auctor. Vivamus tortor massa, laoreet a ornare at, scelerisque ultricies sem. Phasellus ut ullamcorper ipsum, ut consequat turpis. Nulla mi leo, sagittis ut varius et, commodo a justo. Nullam ac risus pellentesque, tristique neque eu, vehicula nibh. Vivamus euismod ipsum fringilla lectus luctus mollis. Quisque imperdiet lacus id tellus dictum, vitae vehicula metus viverra. Nulla vitae ligula vel nulla mollis vulputate. In nisi erat, pretium a eros in, sagittis rhoncus lorem. Aenean tincidunt ligula posuere libero elementum, ac vestibulum augue tincidunt. Pellentesque eget velit erat. Duis a erat ligula. In id eros a neque tristique vestibulum.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales, libero et fermentum pulvinar, purus eros varius libero, ac tempor dolor nisl sed risus. Vestibulum pretium tortor lorem, sed tristique augue rhoncus eu. Morbi dignissim vel tortor dictum auctor. Vivamus tortor massa, laoreet a ornare at, scelerisque ultricies sem. Phasellus ut ullamcorper ipsum, ut consequat turpis. Nulla mi leo, sagittis ut varius et, commodo a justo. Nullam ac risus pellentesque, tristique neque eu, vehicula nibh. Vivamus euismod ipsum fringilla lectus luctus mollis. Quisque imperdiet lacus id tellus dictum, vitae vehicula metus viverra. Nulla vitae ligula vel nulla mollis vulputate. In nisi erat, pretium a eros in, sagittis rhoncus lorem. Aenean tincidunt ligula posuere libero elementum, ac vestibulum augue tincidunt. Pellentesque eget velit erat. Duis a erat ligula. In id eros a neque tristique vestibulum.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales, libero et fermentum pulvinar, purus eros varius libero, ac tempor dolor nisl sed risus. Vestibulum pretium tortor lorem, sed tristique augue rhoncus eu. Morbi dignissim vel tortor dictum auctor. Vivamus tortor massa, laoreet a ornare at, scelerisque ultricies sem. Phasellus ut ullamcorper ipsum, ut consequat turpis. Nulla mi leo, sagittis ut varius et, commodo a justo. Nullam ac risus pellentesque, tristique neque eu, vehicula nibh. Vivamus euismod ipsum fringilla lectus luctus mollis. Quisque imperdiet lacus id tellus dictum, vitae vehicula metus viverra. Nulla vitae ligula vel nulla mollis vulputate. In nisi erat, pretium a eros in, sagittis rhoncus lorem. Aenean tincidunt ligula posuere libero elementum, ac vestibulum augue tincidunt. Pellentesque eget velit erat. Duis a erat ligula. In id eros a neque tristique vestibulum.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales, libero et fermentum pulvinar, purus eros varius libero, ac tempor dolor nisl sed risus. Vestibulum pretium tortor lorem, sed tristique augue rhoncus eu. Morbi dignissim vel tortor dictum auctor. Vivamus tortor massa, laoreet a ornare at, scelerisque ultricies sem. Phasellus ut ullamcorper ipsum, ut consequat turpis. Nulla mi leo, sagittis ut varius et, commodo a justo. Nullam ac risus pellentesque, tristique neque eu, vehicula nibh. Vivamus euismod ipsum fringilla lectus luctus mollis. Quisque imperdiet lacus id tellus dictum, vitae vehicula metus viverra. Nulla vitae ligula vel nulla mollis vulputate. In nisi erat, pretium a eros in, sagittis rhoncus lorem. Aenean tincidunt ligula posuere libero elementum, ac vestibulum augue tincidunt. Pellentesque eget velit erat. Duis a erat ligula. In id eros a neque tristique vestibulum.</p> <script src="js/index.js"></script>
</body>
</html>

Sticky Menu with VanillaJS - Script Codes CSS Codes

@import url("https://fonts.googleapis.com/css?family=HammersmithOne");
.menu-wrapper { background: #ecf0f1; background: linear-gradient(top, #ecf0f1, #ecf0f1) no-repeat; width: 100%; height: 100px; display: flex; flex-direction: row; align-items: center; justify-content: center; border: 1px solid #bdc3c7; transition: height 0.2s linear; position: absolute; top: 85px; left: 0;
}
.menu-wrapper-shadow { height: 200px; position: relative; display: block;
}
.menu-wrapper.fixed { height: 50px;
}
.menu { list-style: none; padding: 0; margin: 0; overflow: hidden; height: 100%;
}
.menu-item { float: left; font-family: 'Hammersmith One', sans-serif; height: 100%;
}
.menu-item a { height: 100%; padding: 0 50px; text-shadow: 1px 1px 0px #fff; color: #7f8c8d; text-decoration: none; display: flex; flex-direction: row; align-items: center; justify-content: center; transition: all 0.2s linear;
}
.menu-wrapper.fixed .menu-item a { padding: 0 20px;
}
.menu-item a:hover { background: #dcdddd;
}
.fixed { position: fixed; top: 0; left: 0;
}

Sticky Menu with VanillaJS - Script Codes JS Codes

(function () { var targetElement = document.querySelector('.menu-wrapper'), scrollTop, targetOffsetTop = targetElement.offsetTop; window.addEventListener('scroll', function() { scrollTop = document.documentElement.scrollTop || document.body.scrollTop; if (scrollTop >= targetOffsetTop) { targetElement.classList.add('fixed'); } else { targetElement.classList.remove('fixed'); } }, false);
}());
Sticky Menu with VanillaJS - Script Codes
Sticky Menu with VanillaJS - Script Codes
Home Page Home
Developer Felquis
Username felquis
Uploaded December 08, 2022
Rating 3
Size 4,836 Kb
Views 14,168
Do you need developer help for Sticky Menu with VanillaJS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Felquis (felquis) Script Codes
Name
Changing pseudo-element content using JavaScript
Swiper simple DEMO
Teste prepend com Node API
StopPropagation example with pure JS
A Pen by Felquis
Vanilla JavaScript Trigger Events
Exemplo fazendo um prepend com innerHTML
Ionic Infinite outside ion-content with ion-pane
Teste prepend com Node API usando DocumentFragment
Teste prepend com insertAdjacentHTML
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!