D4mations.com

Sticky Navigation Tutorial (Fixed Position CSS + JavaScript / jQuery)



Learn how to create a “sticky” navigation (element should use “fixed” position once it would normally scroll out of view). Check out my “Get a Developer Job” course: https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBE-HALF-OFF

Link to the demo files shown in the lesson:

Sticky Navigation Tutorial

Have you put together a neat page infused with JavaScript awesomeness and want to move it from your computer to online so the world can see your JS chops? I’ve partnered with A Small Orange and can now offer my students 20% savings on any hosting plan. Hint: the shared “Small” plan is one of the best bangs for your buck around! http://p.asmallorange.com/learnwebcode/specialoffer

Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at http://learnwebcode.com/

Follow LearnWebCode on Twitter for resources and updates:

In this lesson we make use of JavaScript and the jQuery library for event handling and conditional logic. If you are unfamiliar with JavaScript I recommend watching these two introductory videos:



Original source

d4mer

, , , , , ,

20 responses to “Sticky Navigation Tutorial (Fixed Position CSS + JavaScript / jQuery)”

  3. one tip i can give for people which notice that their website is getting slower when they scroll up and down, declare the wrap statement outside the window.scroll, otherwise it will make every time a new place-holder class if you scroll

  5. the .fixed .nav-inner-most is not really necessary.
    Just move the css stuff from .nav-inner-most to .fixed .nav-inner.
    And change padding to 0.

    .fixed .nav-inner {
    padding: 0;
    margin: 0 auto;
    max-width: 700px;
    background-color: #e7ecf2;
    }

    That will do the same.

  8. I have been trying to create a sticky nav for MONTHS. I've read documentation on frameworks, watched tutorials, and even copy and pasted code. I don't know what the deal was, but none of it worked.

    This tutorial actually worked for me! I didn't use the two inner navs, but everything else was good enough. Thank you so much for this video.

  9. Hey I'm not sure if you're still actively answering questions but I think I stumbled on quite a hard one. So first of all this video helped me out a ton! Thanks a lot 🙂 Now there is a problem with this sticky bar in combination with bootstrap. I used this in my bootstrap page and everything seemed fine until I started using the bootstrap row and column classes later on in the page. As soon as I give a div the row and column classes to make simple divisions, all of the divs contents will shine through the bar. E.g. the bar overrides the background colour of my div, however, the text and embedded video in the div will override the navbar (I think this also has to do with the fact that the navbar in fixed position at the top is not seen as an element by the page as you explained). If you have any experience with bootstrap, is there any way you could help me figure out a solution to this problem?

  10. Great tutorial, thanks man. However I've got a question: how would you develop this method to make the navigation follow scrolled content again after sticking it just like you did in this video?

    For instance, let's say we have two columns: on the right side long paragraphs and on the left side the titles of each and we want to show the title of the paragraph being seen at the right moment.

  11. Your tutorials are great. I am a total noob to this stuff, which also leaves me a perspective of being untainted by being "used to" certain methods or solutions. Why does it feel like half the time in CSS I am spending time unbreaking things that CSS should handle with ease? Float clearfix, border-boxes, these inner-div and innermost-divs in JS all seem like hacking a language that is not up to the task of being consistent. It seems like more than just learning certain quirks.. It feels like CSS in and of itself is inadequate..

Leave a Reply