向上或向下滚动后，转换​​固定div的top属性

Question

I am trying to duplicate the functionality of the fixed all channels div found on this website: http://thenextweb.com/

I have a fixed div that I want to be at top:50px when the header is in the screen (the header is 50px) and then once the header is no longer on the screen, the fixed div is positioned at the top of the window.

I'm thinking I may have to use jQuery for this but I'm really not sure. Looking for some opinions on this and would prefer to do it in pure CSS.

My code:

HTML

<div id ="wrapper">

    <!--Start header-->
    <div id ="header">

        <!--Start main-list-->
        <div id="main-list">
            <ul>
                <li id ="hidden-burger"><img src="../images/nextimages/burger.png"></li>
                <li id ="logo"><a href=""><img src="../images/nextimages/tnwlistlogo.png"/></a></li>
                <li id ="blog"><a href="">Blog</a></li>
                <li id ="other-main-list"><a href="">Conference</a></li>
                <li id ="other-main-list"><a href="">103 Deals</a></li>
                <li id ="other-main-list"><a href="">Pro</a></li>
            </ul>
        </div>
        <!--End main-list-->

        <!--Start social list-->
        <div id ="social">
          <ul>
            <li><div class="fb-like" data-href="https://www.facebook.com/thenextweb" data-layout="button" data-action="like" data-show-faces="false" data-share="false"></div></li>
            <li><a href="https://twitter.com/TheNextWeb" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Follow</a></li>
            <li><a href="http://thenextweb.com/feed?token=116910" id="rss"></a></li>
            <li id ="down-arrow"><i class="fa fa-sort-desc"></i></li>
            <li id="hidden-follow">Follow<i class="fa fa-sort-desc"></i></li>
            <li id ="user"><i class="fa fa-user"></i></li>
            <li id ="info"><i class="fa fa-info-circle"></i></li>
            <li id ="search"><i class="fa fa-search"></i></li>
            <input id ="search-input" name="search" placeholder ="Search..." type="text"></input>
         </ul>

        </div>
        <!--End Social List-->

    </div>
    <!--End header-->

<!--Start stream-->
<div id="stream">

    <!--Start top-stream-->
    <div id="top-stream">

        <ul>
            <li id="latest">
                <i class="fa fa-clock-o"></i> Latest
            </li>
            <li id="popular">
                <i class="fa fa-fire"></i> Popular
            </li>
        </ul>

        <!--Start all-channels-->
        <div id="all-channels">

            <span>All Channels</span> <i class="fa fa-sort-desc"></i>

        <select>

            <option value ="all">All Channels</option>

            <optgroup label="Channels">
                <option value="apps">Apps</option>
                <option value="creativity">Creativity</option>
                <option value="dd">Design & Dev</option>
                <option value="entrepreneur">Entrepreneur</option>
                <option value="gadgets">Gadgets</option>
                <option value="Insider">Insider</option>
                <option value="lifehacks">Lifehacks</option>
                <option value="media">Media</option>
                <option value="Offers">Offers</option>
                <option value="Shareables">Shareables</option>
                <option value="socialmedia">Social Media</option>
            </optgroup>

        </select>
        </div>
        <!--END all-channels-->
    </div>
    <!--END top stream-->

        <!--Start stream-list-->
        <div id="stream-list">
            <ul>
                <li id="stream-item"></li>
                <li id="stream-item"></li>
                <li id="stream-item"></li>
                <li id="stream-item"></li>
                <li id="stream-item"></li>
                <li id="stream-item"></li>
                <li id="stream-item"></li>
                <li id="stream-item"></li>
                <li id="stream-item"></li>
                <li id="stream-item"></li>
                <li id="stream-item"></li>
                <li id="stream-item"></li>
                <li id="stream-item"></li>
                <li id="stream-item"></li>
                <li id="stream-item"></li>
            </ul>
        </div>
        <!--END stream list-->

    <!--Start stream footer-->
    <div id ="stream-footer">
        <ul>
        <li>About</li>
        <li>Goodies</li>
        <li>Advertise</li>
        <li>Privacy</li>
        <li>ToS</li>
        </ul>
    </div>
    <!--END stream footer-->

</div>

CSS

#wrapper {
    height:100%;
    width:100%;
    padding:0;
    margin:0;
}
#header{
    width:100%;
    max-width:100%;
    height:3em;
    border-bottom: 2px solid #d9e0e2;
    min-width:320px;
}
#hidden-burger{
    width:24px;
    height:24px;
    display:none;
    padding-top:.3em;
    float:left;
}
#main-list{
    width:45%;
    float:left;
}
#main-list li{
    float:left;
    height:3em;
    vertical-align:middle;
}
#main-list ul{
    height::3em;
    padding:0;
    margin:0;
    list-style-type:none;
}
#logo {
    margin-right:.875em;
}
#blog a{
    color:#FF3C1F;
    display:block;
    margin-right:.5em;
    line-height:2.9em;
    text-decoration:none;
    font-size:1em;
    font-weight:400;
    text-transform:capitalize;
    font-family:'Fjalla One', Arial, Helvetica, sans-serif;
    text-transform:uppercase;
    border-bottom:2px solid #FF3C1F;
}
#other-main-list a{
    display:block;
    margin-right:.875em;
    line-height:2.9em;
    text-decoration:none;
    font-size:1em;
    color:#879096;
    font-weight:400;
    opacity:.6;
    text-transform:capitalize;
    font-family:'Fjalla One', Arial, Helvetica, sans-serif;
    text-transform:uppercase;
}

#other-main-list a:hover{
    color:#FF3C1F;
    border-bottom:2px solid #FF3C1F;
    opacity:1;
}
#main-list img{
    padding-top:4px;
    padding-left:5px;
}

#social{
    width:30em;
    float:right;
}
#social ul {
    float:right;
    padding:0;
    margin:0;
    list-style-type:none;
}
#social li{
    margin-right:.3em;
    float:left;
    vertical-align:middle;
    height:3em;
    padding-top:.75em;
}

#social i{
    width:24px;
    height:3em;
    margin-right:.5em;
}
#social i:hover{
    color:#FF3C1F;
    cursor:pointer;
}


#social img{
    width:24px;
    height:24px;
}

#social i:first-child{
    margin-left:.875em;
}
#rss{
    display: block;
    border-right:none;
    height: 20px;
    width: 20px;
    background: #f80;
    color: #fff;
    border-radius: 2px;
    top: 0;
    line-height: 20px;
    font-size: 14px;
    text-align: center;
    text-indent: 2px;
    border: 1px solid #dd7600;
    background-image:url(../images/nextimages/rss.png);
}

#down-arrow, #user, #info{
    border-right:1px solid #F2F2F2;
}

#hidden-follow{
    display:none;
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    margin-top:.75em;
    color:#4e5860;
    font-family:'Source Sans Pro', sans-serif;
}
#hidden-follow:hover{
    color:#FF3C1F;
    cursor:pointer;
}
#search-input {
    width:25%;
    background-color: #f7f9f9;
    border-radius: 3px;
    float:left;
    display: inline-block;
    font-size: 14px;
    line-height: 20px;
    margin-top:5px;
    outline: 0;
    padding: 8px 8px 6px 8px !important;
    border: 1px solid #d9e0e2 !important;
    box-shadow: none;
    font-family:'Source Sans Pro', sans-serif;
    font-weight:200;
    padding-left:50px;
}

#stream {
    margin-bottom: 1.25em;
    position: fixed;
    padding: 0 0 .75em 0;
    font-weight: 400;
    float: left;
    z-index: 88;
    background: #fff;
    border-right: 1px solid #d9e0e2;
    height: 100%;
    width: 325px;
    -webkit-font-smoothing: antialiased;
}
#top-stream{
    border-bottom: 1px solid #d9e0e2;
    box-shadow: 0 2px 0 rgba(217,224,226,0.2);
    padding: 20px 12px;
    color:#4e5860;
    font-size:.875em;
    font-weight:800;
    font-family:'Source Sans Pro', sans-serif;
    text-transform:uppercase;
    height:8.5em;
}
#top-stream ul{
    list-style-type:none;
    padding:0;
    margin:0;
}
#top-stream li{
    float:left;
    padding:1em;
    border: 1px solid #d9e0e2;
    vertical-align:middle;
    border-radius:1px;
    cursor:pointer;
    box-shadow: 0 2px 0 rgba(217,224,226,0.2);
    border-radius:.25em;
    margin:0;
    color:#4e5860;
    font-size:.875em;
    font-weight:800;
    font-family:'Source Sans Pro', sans-serif;
    text-transform:uppercase;
}
#latest{
    border-right:none;
    width:12em;
    text-align:center;
    background-color:#F8F9FA;
}
#popular{
    width:12em;
    text-align:center;
}
#all-channels {
    width:24em;
    margin-top:1em;
    background-color: #ff3c1f;
    border-radius: .25em;
    color: #fff;
    font-family: 'Source Sans Pro',sans-serif;
    font-size: .875em;
    font-style: normal;
    line-height: 36px;
    float:left;
    position:relative;
    cursor:pointer;
}
#all-channels span{
    float:left;
    padding-left:1em;
}
#all-channels i{
    float:right;
    padding:.875em;
}
#all-channels select{
    height:100%;
    width:100%;
    position:absolute;
    left:0;
    margin-top:.875em;
    opacity:0;
    cursor:pointer;
}
#stream-list{
    width: auto;
    height: 100%;
    overflow:hidden;
    overflow:scroll;
}
#stream-item{
    height:5em;
    padding: .813em;
    border-bottom: 1px solid rgba(217,224,226,0.4);
}
#stream-footer{
    background-color: #fff;
    border-top: 1px solid #d9e0e2;
    bottom: 0;
    box-shadow: 0 -2px 0 rgba(217,224,226,0.2);
    font-size: .875em;
    left: 0;
    padding: .75em 0 1em;
    position: fixed;
    text-align: center;
    width: 324px;
    color: #ff3c1f;
    font-family:'Source Sans Pro', sans-serif;
}
#stream-footer ul{
    margin:0;
    padding:0;
    list-style-type:none;
    text-align:center;
}
#stream-footer li{
    display:inline-block;
    padding:.5em;
}
#stream-footer li:hover{
    cursor:pointer;
}

Answer 1

Here's a demo

Basically you need to change the position attribute when the scroll position is higher than your div position.