Can I let my fixed header scroll, the moment a collapsible header is no longer on page? [closed]

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.

Closed 8 years ago.

Improve this question

We've all seen the collapsible headers a lot now a days. I really like the effect it brings to a page, it gives a lot more dept. I would like to achieve this dept effects, but I don't really need the functionality of a fixed header.

Now I've seen collapsible headers done, with the fixed header becoming smaller as soon as the collapsible header is off the page. Is it possible to make the fixed header no longer fixed, the moment the collapsible header is off the page? And make it scroll off the page with the rest of the content?

Answer 1

I have tried it and I hope this is what you want.. Click the link below for Demo..

Demo

This is the HTML

<div id="headerSlideContainer">

    <div id="headerSlideContent">

        Header content goes here!

    </div>
    <div id="new">
        Other Contents
    </div>

</div>

n here goes CSS..

#headerSlideContainer {
    position: absolute;

    top:0px;
    width: 100%;

   height:1000px;
    background: black;
}
#headerSlideContent {
    width: 900px;
    height: 50px;
    margin: 0 auto;
    color: white;
    background:Red;
    z-index:10000;
    position:fixed;
}

#new{
    top:60px;
    z-index:2;
    height:100px;
    background:Orange;
    position:absolute;
    color: white;

}

n this is the Javascript..

$(function() {

    var bar = $('#headerSlideContainer');
    var top = bar.css('top');
    $(window).scroll(function() {

        if($(this).scrollTop() > 50) {
            bar.stop().animate({'top' : '5px'}, 500);
        } else {
            bar.stop().animate({'top' : top}, 500);
        }
    });
});