CODE：

#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是次要的选择。

Answer 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; 
}

希望它有所帮助！

在固定元素中滚动背景？

CODE：

1 个答案: