Прокручивать фон в фиксированном элементе?

0

Я пытаюсь получить background моего fixed элемента для перемещения (изменение background-position)
при прокрутке страницы вниз.

FIDDLE

Я сделал небольшую анимацию, чтобы продемонстрировать эффект, который я хочу.

КОД:

#nav-container {
position: fixed;
top: 0;
left: 0;
box-shadow: 5px 2px 3px gray;
background: url('triangular.png');
background-attachment: fixed;
height: 200%;
width: 142px;
z-index: 8;
/*animation: movebg 1s infinite linear;
-webkit-animation: movebg 1s infinite linear;*/
}

@keyframes movebg {
0% {background-position: 0 0;}

100% {background-position: 60px 60px;}

}

@-webkit-keyframes movebg {
0% {background-position: 0 0;}

100% {background-position: 60px 60px;}

}

<body class="pure-u-1">

    <div id="bg-container">
    </div>

    <div id="nav-container">

        <span id="logo-nav">

        </span>

        <nav id="nav">
            <li>
                <a href="#etusivu">Etusivu</a>
            </li>
            <li>
                <a href="#tietoa">Tietoa Meistä</a>
            </li>
            <li>
                <a href="#hinnasto">Hinnasto</a>
            </li>
            <li>
                <a>Yhteystiedot</a>
            </li>
        </nav>

</div>

<div id="wrapper" class="pure-u-1">

<div id="sivu-1" class="pure-u-1">

<div id="logo">

&nbsp;

</div>

<img src="kuntosali.jpg" class="pure-img"></img>

<!--
<video autoplay id="bgvid" src="kuntosali.mp4" type="video/mp4">
</video>
-->

</div>

<div id="sivu-2">
<span>
    - "Keski-Uudenmaan uusin ja nykyaikaisin kuntosali" -
    </span>
</div>

Решение CSS3, если возможно, оценивается.
Если нет, jQuery является вторичным вариантом.

  • 5
    Это невозможно Позиция вашего элемента fixed что означает, что прокручивается вместе со страницей. Вы могли бы обойти это, только сделав его прозрачным и поместив этот фон на статический элемент, расположенный прямо под ним.
  • 0
    @JamesDonnelly победил меня в этом. Установите фон на элемент ниже - или даже на всю страницу - затем исправьте прозрачную панель навигации.
Показать ещё 1 комментарий
Теги:

1 ответ

1
Лучший ответ

Возможно, это то, что вам нужно: я поставил абсолютно позиционированный фон, который поднимает всю страницу, а затем фиксирует элемент.

JSFIDDLER

body {
    position: relative;
    height: 100%;
    padding: 0;
    margin: 0;
}

* {
    margin: 0;
}

#bg-container {
    position: absolute;
    height: 100%;
     padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    box-shadow: 5px 2px 3px gray;
    background: url('http://i.imgur.com/gsXrvJ8.png');
    width: 142px;
    z-index: 2; 
}

#nav-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 142px;
    height: 200%;
    z-index: 8; 
}

Надеюсь, поможет!

Поделиться
  • 0
    Хорошая идея! Но моя страница длиннее 100%, и я не могу измерить ее высоту, поэтому фон останавливается после 100%. Как я мог это исправить? Фиксированная позиция разрешила бы это.
  • 0
    Если я не ошибаюсь ... просто поставьте position: relative тела и абсолютно позиционированный фоновый объект заполнится на 100% ... в скрипке это работает.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню