發生特定垂直溢出時的固定標題

Question

這可能是一個不幸的廣泛問題。 但我無法找到關鍵字..所以我希望這有助於任何人試圖實現我提到的事情。

我想製作一個通常正常的標題，它就是它首先設計的標題。 但是，當我們做一個spesific溢出，那麼標題就被固定到頂部，橫向覆蓋整個瀏覽器..

http://riotindustries.com/ 退房此鏈接。流下來，看標題。

我想你已經看到了，我現在談論的事情..

我怎麼能做到嗎？

謝謝。

Answer 1

如果你知道如何使用的開發工具，那麼你可以在裏面http://riotindustries.com/看到header股利分配的fixedtop類一旦用戶從上向下滾動的350px。

你可以做到這一點使用jQuery，我已經迅速創建了一個示例jsFiddle爲您檢查，雖然你將需要進一步修改樣式，根據您的需求，因爲它很簡單。在我的jsFiddle中發生的事情是，當您滾過250px時，header被分配了fixedtop類。

HTML：

<header>This is a nice header, bro!</header> 
<div id="longcontent"></div> 

CSS：

header { 
    position: fixed; 
    background: gray; 
    color: black; 
    width: 500px; 
    text-align: center; 
    padding: 50px; 
    left: 50%; 
    transform: translate(-50%, 0); 
    top: 30px; 
} 

.fixedtop { 
    width: 100%; 
    background: black; 
    color: white; 
    padding: 50px 0px; 
    text-align: center; 
    box-shadow: 1px 1px 1px red; 
    top: 0px; 
} 

#longcontent { 
    height: 1000px; 
} 

的jQuery：

$(window).scroll(function() {  
    var scroll = $(window).scrollTop(); 

    if (scroll >= 250) { 
     $("header").addClass("fixedtop"); 
    } else { 
     $("header").removeClass("fixedtop"); 
    } 
}); 

---

$(window).scroll(function() {  
 
    var scroll = $(window).scrollTop(); 
 

 
    if (scroll >= 250) { 
 
     $("header").addClass("fixedtop"); 
 
    } else { 
 
     $("header").removeClass("fixedtop"); 
 
    } 
 
});

header { 
 
    position: fixed; 
 
    background: gray; 
 
    color: black; 
 
    width: 500px; 
 
    text-align: center; 
 
    padding: 50px; 
 
    left: 50%; 
 
    transform: translate(-50%, 0); 
 
    top: 30px; 
 
} 
 

 
.fixedtop { 
 
    width: 100%; 
 
    background: black; 
 
    color: white; 
 
    padding: 50px 0px; 
 
    text-align: center; 
 
    box-shadow: 1px 1px 1px red; 
 
    top: 0px; 
 
} 
 

 
#longcontent { 
 
    height: 1000px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header>This is a nice header, bro!</header> 
 
<div id="longcontent"></div>