-1

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

然后在滚动浏览导航时，标题变为粉红色的半透明条，左侧是标题/徽标，右侧是导航。它也贴在页面顶部。

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;
}

先感谢您。

4

1 回答 1

0

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

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

为了使这个解决方案起作用，需要在页面的 head 部分链接 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 (#left-header div)：

<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 为 #just-for-testing 的 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/

希望有帮助

于 2014-04-25T12:42:40.397 回答