页眉在滚动时发生变化，并一直停留在顶部

Header changes on-scroll and sticks to the top

本文关键字：一直 停留在 顶部 变化 滚动      更新时间：2023-09-26

标题包括一个简单的白色大标题/徽标，下面有一个导航。

然后，滚动经过导航后，标题将变为粉红色半透明条，标题/徽标在左侧，导航在右侧。它也会粘在页面的顶部。

HTML:

<header>
    <h2>The</h2>
    <h1>Catching Raindrops</h1>
    <nav>
        <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Music</a></li>
            <li><a href="#">Travel</a></li>
            <li><a href="#">Quotes</a></li>
        </ul>
    </nav>
</header>

我该怎么做？我搜索了所有我能想到的地方，但没有找到任何关于如何按照我想要的方式更改它的教程。我确实找到了：http://codepen.io/senff/pen/ayGvD这只会使它变得粘稠。

我不知道JS，所以真的不知道如何更改它，但这个似乎是我想要的，类在哪里更改，所以我只需要在css中添加另一个类，并将所有滚动更改都放在那里，对吗？如果我是，我该如何更改徽标和导航？在这个CodePen示例中，只使用了一个类，它只能更改导航，而不能更改标题，对吧？如果这听起来令人难以置信的困惑，我很抱歉。：/

在这个中，JS代码以选择器为目标并更改颜色，但正如我在上面解释的那样，我的更改更复杂。

这个页面的布局是我想要的样子，只是这个教程让我困惑不已：/

这是我的CSS

header {
    font-family:'Steelfish';
    color: #FFF;
    margin: 10px 0 0 0;
}
header h1 {
    font-size: 90px;
    text-align: center;
    text-transform: uppercase;
}
header h2 {
    font-size: 40px;
    text-align: center;
    text-transform: uppercase
}
nav {
    font-size: 30px;
    text-align: center;
    text-transform: uppercase;
    margin-top: 5px;
}
nav ul {
    margin:0;
    padding: 0;
    list-style-type: none;
}
nav ul li {
    display: inline-block;
    padding: 0 10px 0 10px;
}
nav ul li a {
    text-decoration: none;
    color: #fff;
}
nav ul li a:hover {
    text-decoration: none;
    color: #9E9E9E;
    -webkit-transition: color 900ms ease;
    -moz-transition:color 900ms ease;
    -o-transition: color 900ms ease;
    transition: color 900ms ease;
}

提前谢谢。

最后一个链接来自我的网站，我的教程是为WordPress和Suffusion主题编写的。这可能是教程看起来令人困惑的原因之一。在WordPress中，jQuery库已经加载，主题有一个标记，该标记在教程中引用。

但是html/javascript/css在WordPress中的工作原理与在任何其他网站中的工作方式完全相同，因此，只要稍作调整，我的网站中的解决方案也适用于您。您只需要做一些小的更改就可以使标记为转换做好准备。

为了使这个解决方案发挥作用，需要在页面的头部链接jQuery库（我还在这里添加了所需的jQuery函数）：

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$j=jQuery.noConflict();
$j(document).ready(function() {    
    var nav = $j('#nav');
            $j('#left-header').hide();
    $j(window).scroll(function () {
        if ($j(this).scrollTop() > 150) {
            nav.addClass("scroll-nav");
$j('#header').hide();
$j('#left-header').show();
        } else {
            nav.removeClass("scroll-nav");
$j('#header').show();
$j('#left-header').hide();
        }
    });
});
</script>
</head>

然后，您必须在标记中进行一些小的更改，主要是为了命名部分，但也为了添加一个新的div，该div需要包含小徽标（#left headerdiv）：

<body>
<header id="header">
    <h2>The</h2>
    <h1>Catching Raindrops</h1>
</header>
    <nav id="nav">
        <div id="left-header">The Catching Raindrops</div>
        <ul class="menu">
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Music</a></li>
            <li><a href="#">Travel</a></li>
            <li><a href="#">Quotes</a></li>
        </ul>
    </nav>
    <div id="just-for-testing" style="height:1000px;">&nbsp;</div>
</body>

添加id为#仅用于测试的div只是为了给页面提供一些高度，否则您无法滚动-用真实内容替换该div。最后，在您的样式表中添加滚动后导航栏的CSS：

.scroll-nav {z-index: 9999; position: fixed; left: 0; top: 0 !important; width: 100%;background:rgba(255,0,0,0.5);}
.scroll-nav ul.menu {float:right;}
#nav #left-header {float:left;font-size:80%;}
#nav #left-header a {background:none;}
#left-header {display:none;border:none;}
#left-header img {border:none !important;}

你可以在下面链接的小提琴中看到、测试和使用所有这些变化

http://jsfiddle.net/drake/bg2S4/

希望它能帮助

相关文章：