Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by J. Alfonso Vélez Valdez
J. Alfonso Vélez Valdez
Courses Plus Student 4,511 Points

Set main header at the bottom in first page and when scrolling set it fixed at the top.

Im having a hard time setting the main header of a site right at the bottom upon entering the site and while the user scrolls down, the header would be at the top in fixed position ..

Any hints or help would be greatly appreciated, Ive been doing CSS lately but cant find the topic.

Example: www.brewlife.com

2 Answers

Eric Buchmann
Eric Buchmann
15,080 Points
Eric Buchmann
Eric Buchmann
15,080 Points

Maybe try something like this jQuery script: http://stickyjs.com/

It's also covered in this series http://teamtreehouse.com/library/using-jquery-plugins

Maybe something in there can help more than I can.

Christopher van Ruitenbeek
Christopher van Ruitenbeek
13,705 Points
Christopher van Ruitenbeek
Christopher van Ruitenbeek
13,705 Points

Use:

header {
  position: fixed;
  bottom: 0;
}

To set the header on the bottom of the page.

And find a JS function that can animate/change the fixed state of the header when scrolling.

For instance:

$(document).ready(function () {
    /* Sticky Menu Bar */
    $(window).scroll(function () {
        if ( $(this).scrollTop() > 135 ) {
            bh.addClass("bottom-header-scroll");
        }
        else {
            bh.removeClass("bottom-header-scroll");
        }
    });
});

This will change the class when scrolling down 135px. The class I used in CSS sets a particular part of the header to the top of the browser screen and keeps it there while scrolling. When you scroll back, it removes the same class it adds when you scroll down. I don't have a live version yet, but it works on my local test server.

Hope this helps.