вертикальное вращение фонового изображения со статической навигацией

Question

Хорошо, поэтому я немного новичок в веб-разработке и пытаюсь создать сайт. Я пытаюсь создать действительно большое фоновое изображение, имеющее несколько разделов на изображении, все они помечены разными цветами, и я хочу добавить панель навигации, чтобы каждый раз, когда вы нажимаете ссылку в навигации, однако навигационная панель остается, фоновое изображение перемещается к следующему разделу. Я попытался написать код с использованием id = "", но это не сработало. Я также пытался включить jquery, но с этим мало что получилось.

Может кто-нибудь, пожалуйста, помогите. Я был в этом некоторое время.

Спасибо Риз

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>