過渡向上或向下滾動

Question

我試圖複製固定的所有通道DIV本網站中的功能後定期div的頂級物業：http://thenextweb.com/

我有，我想在一個固定的股利頂部：50px當標題在屏幕中（標題爲50px），然後一旦標題不再在屏幕上，固定div位於窗口的頂部。我想我可能不得不使用jQuery，但我真的不確定。尋找一些意見，並希望在純CSS做。

我的代碼：

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

這裏有一個demo

基本上你需要改變日當滾動位置高於div位置時，請輸入position屬性。