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

| 好吧，所以我对Web开发有点陌生，并且我正在尝试制作一个网站。我要执行的操作是拥有一个非常大的背景图像，该图像中有多个部分，它们都用不同的颜色标记，我想添加一个导航栏，以便每次您单击导航中的链接时，导航栏保持不变，但是背景图像会向上移动到下一部分。我尝试使用部分id = \“ \”进行编码，但这并没有真正起作用。我也尝试合并jquery，但效果不大。 有人可以帮忙吗？我已经有一段时间了。 谢谢 里兹     
2020-02-24 2 条评论
分享

没有找到相关结果

    已邀请:

    蕾跨立锌煤

            最简单的方法是使用哈希标签，但是您必须（实际上-应该）将背景图像分成多个部分。 结果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>
        
    2020-02-24 0 0
    分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册

    或代码 OrCode.com 备案号：粤ICP备15020848号-1
    Escape time: 0.05069899559021