Question

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

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

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示例中，只使用了一个类，它只能更改导航而不是标题，对吧？对不起，如果这听起来非常令人困惑。：/

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

this页面的布局就是我想要它的样子，只有这个教程让我感到困惑：/

这是我的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;
}

提前谢谢。

Answer 1

最后一个链接来自我的网站，我的教程是为WordPress和Suffusion主题编写的。这可能是教程看起来令人困惑的原因。在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/

希望有所帮助

标题更改滚动并粘贴到顶部

1 个答案: