Question

好吧，所以我对网络开发有点新意，我正在努力创建一个网站。我想要做的是有一个非常大的背景图像，在图像中有多个部分，它们都标有不同的颜色，我想添加一个导航栏，以便每次点击导航中的链接，然而，导航栏停留，背景图像向上移动到下一部分。我尝试编码使用部分id =“”，但这并没有真正起作用。我也试过加入jquery，但对此几乎没有影响。

有人可以帮忙。我已经有一段时间了。

由于 RIZ

Answer 1

最简单的方法是使用哈希标记，但你必须（事实上 - 应该）将背景图像分成多个部分。

生成的CSS应如下所示：

.clear {
    clear: both;
    float: none;
}

#nav {
    position: fixed;
    top: 0;
    right: 0;
    background-color: #fff;
    padding: 10px 10px 10px 5px;
}

    #nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        #nav ul li {
            float: left;
            margin: 0 0 0 10px;
            padding: 0;
        }

#section1 {
    background: #ff0000 url(/path/to/background1.jpg) top center no-repeat;
    height: 400px; /* change to whatever it needs to be */
}

#section2 {
    background: #00ff00 url(/path/to/background2.jpg) top center no-repeat;
    height: 400px; /* change to whatever it needs to be */
}

#section3 {
    background: #0000ff url(/path/to/background3.jpg) top center no-repeat;
    height: 400px; /* change to whatever it needs to be */
}

和HTML：

<div id="nav">
    <ul>
        <li><a href="#section1">first section</a></li>
        <li><a href="#section2">second section</a></li>
        <li><a href="#section3">third section</a></li>
    </ul>
    <div class="clear"></div>
</div>

<div id="section1"> ... </div>
<div id="section2"> ... </div>
<div id="section3"> ... </div>

垂直滚动背景图像与静态导航

1 个答案: