Sticky menu on scroll

Developer
Mark Senff
Size
2,869 Kb
Views
28,336
  1. Sticky menu on scroll Previews
  2. Sticky menu on scroll HTML Codes
  3. Sticky menu on scroll CSS Codes
  4. Sticky menu on scroll JS Codes

How do I make an sticky menu on scroll?

NO IE8 SUPPORT. You should use http://codepen.io/senff/pen/ayGvD. What is a sticky menu on scroll? How do you make a sticky menu on scroll? This script and codes were developed by Mark Senff on 05 August 2022, Friday.

Sticky menu on scroll Previews
IQ Test

Sticky menu on scroll - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sticky menu on scroll</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header> <div class="logo">OLD, OUTDATED STICKY MENU METHOD</div> <div class="intro">Our company is crap! Don't buy our stuff!</div> <div class="menu">Menu goes here - home - links - blah blah</div>
</header>
<div class="content"> <h2>WE HAVE AN IMPROVED VERSION!</h2> <p><strong>This sticky menu doesn't work in IE8, please don't use it anymore. An improved version (that also addresses some other things) can be found here: <a href="http://codepen.io/senff/pen/ayGvD" target="blank">http://codepen.io/senff/pen/ayGvD</a>. Better to use that one.</strong></p> <p>Bacon ipsum dolor sit amet culpa adipisicing andouille ut, salami bresaola spare ribs shank fatback cupidatat est. Occaecat beef flank fatback beef ribs. Sed tempor officia, proident ullamco elit short loin ham hock short ribs laborum pariatur. Nisi frankfurter sint, boudin aute andouille chicken corned beef. Shank pariatur pork loin deserunt et nostrud, sausage ut.</p>
<p>Qui sed elit leberkas enim prosciutto aliqua shank occaecat. Labore enim proident short loin strip steak ut. Bresaola ea sed pariatur culpa sint ham hock tri-tip shoulder. Sed jowl sunt chuck mollit jerky.</p>
<p>Ball tip ham hock pariatur dolore, minim pig qui non filet mignon. Duis dolore do pork belly aute. In consequat mollit consectetur dolore. Short ribs duis tempor, deserunt dolore pastrami pancetta do aliquip jerky sed qui spare ribs tri-tip. Qui jerky culpa eu drumstick chicken sausage brisket.</p>
<p>Bacon ipsum dolor sit amet culpa adipisicing andouille ut, salami bresaola spare ribs shank fatback cupidatat est. Occaecat beef flank fatback beef ribs. Sed tempor officia, proident ullamco elit short loin ham hock short ribs laborum pariatur. Nisi frankfurter sint, boudin aute andouille chicken corned beef. Shank pariatur pork loin deserunt et nostrud, sausage ut.</p>
<p>Qui sed elit leberkas enim prosciutto aliqua shank occaecat. Labore enim proident short loin strip steak ut. Bresaola ea sed pariatur culpa sint ham hock tri-tip shoulder. Sed jowl sunt chuck mollit jerky.</p>
<p>Ball tip ham hock pariatur dolore, minim pig qui non filet mignon. Duis dolore do pork belly aute. In consequat mollit consectetur dolore. Short ribs duis tempor, deserunt dolore pastrami pancetta do aliquip jerky sed qui spare ribs tri-tip. Qui jerky culpa eu drumstick chicken sausage brisket.</p> <p>Bacon ipsum dolor sit amet culpa adipisicing andouille ut, salami bresaola spare ribs shank fatback cupidatat est. Occaecat beef flank fatback beef ribs. Sed tempor officia, proident ullamco elit short loin ham hock short ribs laborum pariatur. Nisi frankfurter sint, boudin aute andouille chicken corned beef. Shank pariatur pork loin deserunt et nostrud, sausage ut.</p>
<p>Qui sed elit leberkas enim prosciutto aliqua shank occaecat. Labore enim proident short loin strip steak ut. Bresaola ea sed pariatur culpa sint ham hock tri-tip shoulder. Sed jowl sunt chuck mollit jerky.</p>
<p>Ball tip ham hock pariatur dolore, minim pig qui non filet mignon. Duis dolore do pork belly aute. In consequat mollit consectetur dolore. Short ribs duis tempor, deserunt dolore pastrami pancetta do aliquip jerky sed qui spare ribs tri-tip. Qui jerky culpa eu drumstick chicken sausage brisket.</p> <p>Below this point: lorem ipsum stuff, so that the page actually has enough content to scroll.</p> <p>Bacon ipsum dolor sit amet culpa adipisicing andouille ut, salami bresaola spare ribs shank fatback cupidatat est. Occaecat beef flank fatback beef ribs. Sed tempor officia, proident ullamco elit short loin ham hock short ribs laborum pariatur. Nisi frankfurter sint, boudin aute andouille chicken corned beef. Shank pariatur pork loin deserunt et nostrud, sausage ut.</p>
<p>Qui sed elit leberkas enim prosciutto aliqua shank occaecat. Labore enim proident short loin strip steak ut. Bresaola ea sed pariatur culpa sint ham hock tri-tip shoulder. Sed jowl sunt chuck mollit jerky.</p>
<p>Ball tip ham hock pariatur dolore, minim pig qui non filet mignon. Duis dolore do pork belly aute. In consequat mollit consectetur dolore. Short ribs duis tempor, deserunt dolore pastrami pancetta do aliquip jerky sed qui spare ribs tri-tip. Qui jerky culpa eu drumstick chicken sausage brisket.</p>
<p>Bacon ipsum dolor sit amet culpa adipisicing andouille ut, salami bresaola spare ribs shank fatback cupidatat est. Occaecat beef flank fatback beef ribs. Sed tempor officia, proident ullamco elit short loin ham hock short ribs laborum pariatur. Nisi frankfurter sint, boudin aute andouille chicken corned beef. Shank pariatur pork loin deserunt et nostrud, sausage ut.</p>
<p>Qui sed elit leberkas enim prosciutto aliqua shank occaecat. Labore enim proident short loin strip steak ut. Bresaola ea sed pariatur culpa sint ham hock tri-tip shoulder. Sed jowl sunt chuck mollit jerky.</p>
<p>Ball tip ham hock pariatur dolore, minim pig qui non filet mignon. Duis dolore do pork belly aute. In consequat mollit consectetur dolore. Short ribs duis tempor, deserunt dolore pastrami pancetta do aliquip jerky sed qui spare ribs tri-tip. Qui jerky culpa eu drumstick chicken sausage brisket.</p> <p>Bacon ipsum dolor sit amet culpa adipisicing andouille ut, salami bresaola spare ribs shank fatback cupidatat est. Occaecat beef flank fatback beef ribs. Sed tempor officia, proident ullamco elit short loin ham hock short ribs laborum pariatur. Nisi frankfurter sint, boudin aute andouille chicken corned beef. Shank pariatur pork loin deserunt et nostrud, sausage ut.</p>
<p>Qui sed elit leberkas enim prosciutto aliqua shank occaecat. Labore enim proident short loin strip steak ut. Bresaola ea sed pariatur culpa sint ham hock tri-tip shoulder. Sed jowl sunt chuck mollit jerky.</p>
<p>Ball tip ham hock pariatur dolore, minim pig qui non filet mignon. Duis dolore do pork belly aute. In consequat mollit consectetur dolore. Short ribs duis tempor, deserunt dolore pastrami pancetta do aliquip jerky sed qui spare ribs tri-tip. Qui jerky culpa eu drumstick chicken sausage brisket.</p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Sticky menu on scroll - Script Codes CSS Codes

* {font-family:arial; margin:0; padding:0;}
.logo {font-size:40px; font-weight:bold;color:#a00; font-style:italic;}
.intro {color:#777; font-style:italic; margin:10px 0;}
.menu {background:#a00; color:#fff; height:30px; line-height:30px;letter-spacing:1px; width:100%;}
.content {margin-top:10px;}
.menu-padding {padding-top:40px;}
.content p {margin-bottom:20px;}
.sticky {position:fixed; top:0;}
ul {margin:0 0 30px 30px;}
li {list-style-type:disc; margin-bottom:10px;}

Sticky menu on scroll - Script Codes JS Codes

$(document).ready(function(){
var menu = document.querySelector('.menu');
var origTopCoordinateMenu = menu.offsetTop;
function scroll () { if ($(window).scrollTop() >= origTopCoordinateMenu) { $('.menu').addClass('sticky'); $('.content').addClass('menu-padding'); } else { $('.menu').removeClass('sticky'); $('.content').removeClass('menu-padding'); }
}
document.onscroll = scroll;
});
Sticky menu on scroll - Script Codes
Sticky menu on scroll - Script Codes
Home Page Home
Developer Mark Senff
Username senff
Uploaded August 05, 2022
Rating 3
Size 2,869 Kb
Views 28,336
Do you need developer help for Sticky menu on scroll?

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!

Mark Senff (senff) Script Codes
Name
A Pen by Mark Senff
Sticky menu on scroll
Sticky menu on scroll
Preview a photo upload before submitting
Create amazing video scripts 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!