发生特定垂直溢出时的固定标题

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>