CODEWITHSUNDEEP
javascriptjqueryhtmlcssfixed
brivvy
brivvy

Reputation: 33

Can someone help me with a CSS/jQuery fixed header with dynamic elements?

What I want to do is have a fixed header that has the nice "shrinking effect" when you scroll down and resizes the content within - that's pretty simple and I have followed tutorials to help me do that.

Now what I want to do is to have elements APPEAR when I scroll down; for example:

enter image description here

When the user scrolls down, the menu hides the elements in the top left (links) and then makes a logo appear. A search bar also appears in the middle. I can do the CSS for these and set 'display:none', but I would like for the scroll down to display them, and then set the other elements to hidden.

Keep in mind that when I scroll back to the top, I would need for the original elements to re-appear and then hide the search and logo.

This is the code I have for getting the fixed header to work (it's ugly but it works in a basic form):

header {
    text-align: center;
    font-size: 1.4em;
    line-height: 50px;
    height: 70px;
    background: #323232;
    color: #fff;
    font-family:'Open Sans', sans-serif;
    /* set animation */
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
header.fixed {
    position: fixed;
    font-size: 14px;
    line-height: 48px;
    height: 40px;
    width: 100%;
    background: #323232;
    text-align: left;
    padding-left: 20px;
}
header.logo {
    width: 10px;
    height: 10px;
    background-color: #red;
    position: fixed;
    float: left;
}
.content {
    height: 2000px;
    width: 100%;
    background-color: #fff;
    padding: 25px;
}

<body>
    <!-- our markup -->
    <header>
        <h1>Header</h1>
    </header>
    <!-- an image for demonstration purposes -->
    <div class="content">Site Content</div>
    <!-- import jQuery -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- write script to toggle class on scroll -->
    <script>
        $(window).scroll(function() {
            if ($(this).scrollTop() > 1) {
                $('header').addClass("fixed");
            } else {
                $('header').removeClass("fixed");
            }
        });
    </script>
</body>

Upvotes: 1

Views: 981

Answers (1)

deebs
deebs

Reputation: 1410

Here is a very quick version of what you're looking for. Still need to style the right "links". Just a matter of toggling what is and isn't seen:

(Demo)

$(window).scroll(function () {
    if ($(this).scrollTop() > 1) {
        $('header').addClass("fixed");
        $('.mLeft').fadeOut();
        $('.logo, .search').fadeIn();
    } else {
        $('header').removeClass("fixed");
        $('.mLeft').fadeIn();
        $('.logo, .search').hide();
    }
});

header {
    text-align: center;
    font-size: 1.4em;
    line-height: 50px;
    height: 70px;
    background: #323232;
    color: #fff;
    font-family:'Open Sans', sans-serif;
    /* set animation */
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
header.fixed {
    position: fixed;
    font-size: 14px;
    line-height: 48px;
    height: 40px;
    width: 100%;
    background: #323232;
    text-align: left;
}
.search {
    display: none;
    position: fixed;
    left: 190px;
    top: 0;
}
DIV.logo {
    display: none;
    padding: 5px;
    background-color: red;
    position: fixed;
    float: left;
    left: 20px;
    top: 0;
}
.mLeft {
    float: left;
}
.mRight {
    float: right;
}
.content {
    height: 2000px;
    width: 100%;
    background-color: #fff;
    padding: 25px;
}

Upvotes: 1

Related Questions