Sticky Navigation

Developer
Tom Hermans
Size
4,529 Kb
Views
10,120
  1. Sticky Navigation Previews
  2. Sticky Navigation HTML Codes
  3. Sticky Navigation CSS Codes
  4. Sticky Navigation JS Codes

How do I make an sticky navigation?

While the header and the content scroll, the nav element in between will scroll to the top of the window, but no further.. What is a sticky navigation? How do you make a sticky navigation? This script and codes were developed by Tom Hermans on 09 December 2022, Friday.

Sticky Navigation Previews
IQ Test

Sticky Navigation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sticky Navigation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html> <body> <div class="wrapper"> <div class="adzone-top"> <img src="http://placehold.it/728x90" alt="" /> </div> <header id="unstickyheader">	<h1>the Header and the content will scroll</h1>	<h2>... but the nav won't</h2>	</header>	<nav id="stickyheader">	<ul>	<li>Sticky Nav Item 1</li>	<li>Sticky Nav Item 2</li>	<li>Sticky Nav Item 3</li>	<li>Sticky Nav Item 4</li>	<li>Sticky Nav Item 5</li>	</ul>	</nav>	<div class="content"> <h2>Text is "Getting Responsive" by Jonathan Snook</h2> <p>Copied from his e-mailing</p>	<p>Spring is in the air! And what doesn’t put a spring in your step better than a little link love.</p>
<p>Responsive Modules</p>
<p>As people look to apply a modular approach to their CSS, they (as I have) question how to manage the conditional styling of a module in a particular state: namely, with media queries. The problem is that media queries give you information about the device or window width (with regards to fluid responsive designs) but you’re actually more concerned about what happens when this particular module hits a particular width.</p> <div class="box"> <div class="label"> <h3>Follow up meetings</h3> <p>25jan-2feb</p> </div> </div>
<p>If you try to solve the problem with CSS, you end up creating media query breakpoints where the module breaks within the overall design. That works as long as the design doesn’t change. It would be better if we could provide some conditionals around just the module, instead of trying to make it conditional to the entire layout.</p>
<p>Andrew Hathaway talks a bit about his approach to responsive web design using OOCSS. In the article, he recommends adding classes for each context. For example, adding a ‘left” class for floated containers on larger screens and adding a ‘stacked’ class for removing the float on a smaller screen. I don’t like this approach very much as you end up adding a number of context descriptors on any given element and you’re left referencing the source CSS to understand what should happen in different contexts.</p>
<p>Ian Storm Taylor thinks that Media Queries are a Hack and that we should be able to specify conditions on a specific container. Of course, infinite loops can rear their ugly heads here. For example, if outer div is 300px. But then outer div is &gt;300px, which should resize the inner div back to what it was before. That’s not very good.</p>
<p>The other solution is to use JavaScript. Andy Hume has a post on Responsive Containers that also includes a script to accomplish a similar concept to being able to set a media query on a particular element.</p>
<p>Responsive Deliverables</p>
<p>On the subject of responsive, Dave Rupert had a recent post on dealing with deliverables on a responsive project. It has the best footnote ever! (But I might be biased.) The idea of putting together a system of components is a sound one. An organized system has a number of benefits including code reuse, code reduction, and design management. As Dave puts it, it’s like tiny Bootstraps for every client. As a project matures, each new module that you build becomes an opportunity to ask if it is necessary. Is it necessary to add more code? Is it necessary to add another design component that users have to learn?</p>
<p>Refactoring Bootstrap</p>
<p>Pamela Fox talks about her lessons learned in maintainable CSS that came from porting a project over from one version of Bootstrap to another. Pamela will be speaking at CSSConf next month on this very topic. (There are still tickets left!)</p>
<p>Thanks as always for listening. Until next time!</p>
<p>Jonathan Snook.</p>	</div> </div>
</body>
</html> <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 Navigation - Script Codes CSS Codes

* { margin: 0; padding: 0;
}
html, body { font-family: sans-serif; margin: 0; padding: 0;
}
#unstickyheader, .content { width: 960px; max-width: 100%; background: #f1e9ff; height: 100px; padding-top: 100px;
}
#unstickyheader { background: #9675cd; color: white;
}
#stickyheader { width: 100%; background: red; z-index: 101;
}
#stickyheader ul { list-style: none; width: 960px; margin: 0 auto; padding: .75em 0;
}
#stickyheader ul li { display: inline-block; font-style: 800; font-family: arial; color: white; padding-right: 1em;
}
.box { background: blue; width: 150px; padding: 1em; height: 600px; position: relative;
}
.label { background: green; width: 75%; position: absolute; top: 0;
}
.adzone-top { background: #00f; border-bottom: 1px dashed #5d4e32; height: 100px; position: fixed; width: 100%;
}

Sticky Navigation - Script Codes JS Codes

$(function(){	// Check the initial Position of the Sticky Header	var stickyElem = document.getElementById('stickyheader');	var stickyHeaderTop = $(stickyElem).offset().top - 100;	$(window).scroll(function(){	if( $(window).scrollTop() > stickyHeaderTop ) {	$(stickyElem).css({position: 'fixed', top: '100px'});	} else {	$(stickyElem).css({position: 'static', top: '100px'});	} var boxpos = $('.box').position(); console.log(boxpos);	});	});
Sticky Navigation - Script Codes
Sticky Navigation - Script Codes
Home Page Home
Developer Tom Hermans
Username tomhermans
Uploaded December 09, 2022
Rating 3
Size 4,529 Kb
Views 10,120
Do you need developer help for Sticky Navigation?

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!

Tom Hermans (tomhermans) Script Codes
Name
Styled selectbox
Simple circle cutout css
CKEditor angular test
StickyNav
Media object module
Simple color ribbon
Accessibility wai-aria test
Imagemap pure css trial
CSS Kwicks
CSS3 Shapes reference
Create amazing SEO content 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!