Question

这可能是一个广泛的问题。但是我无法找到关键字..所以我希望这能帮助那些试图实现我会提到的事情的人。

我想制作一个通常正常的标题，它首先是设计的。但是当我们进行特定溢出时，标题将固定在顶部，水平覆盖整个浏览器..

http://riotindustries.com/ 看看这个链接。流下来看看标题。

我想你现在已经看到了我正在谈论的事情..

我该怎么做？

谢谢。

Answer 1

如果您知道如何使用开发人员工具，那么您可以在http://riotindustries.com/内部看到header div在用户向下滚动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>

发生特定垂直溢出时固定标头

1 个答案: