Question

我希望这样按钮留在屏幕上。

现在我使用绝对位置，因此按钮是列表左侧和右侧的固定数量。但我也想要它，以便按钮在滚动时保持原位（如位置：固定）。

这是CSS

#container {
    width: 80%;
    margin: 0 auto;
}
.extradiv {
    padding: 0 80px; /* 70px icon width + 10px margin */
    position:relative;
}
.navblue {
    position: absolute;
    left:0;
    top:0;
}
.navorange {
    position: absolute;
    top:0;
    right:0;
}
.navblue ul {
    list-style: none;
    padding-left: 0;
}
.navblue a {
    display: block;
    font-family: Pictoss;
    font-size: 20px;
    padding: 2px 20px 38px 20px;
    background:#017da1;
    width: 20px;
    text-decoration: none;
    overflow: hidden;
    text-shadow: 0 -1px 1px black;
    border-radius: 50px;
    color: white;
    height: 20px;
    margin-bottom: 10px;
    border: 5px solid #017da1;
    -webkit-transition: all ease-in-out .3s;
    -webkit-background-clip: padding-box;
}
.navorange a {
    display: block;
    font-family: Pictoss;
    font-size: 20px;
    padding: 2px 20px 38px 20px;
    background: #e9500c;
    width: 20px;
    text-decoration: none;
    overflow: hidden;
    text-shadow: 0 -1px 1px black;
    border-radius:50px;
    color: white;
    height: 20px;
    margin-bottom: 10px;
    border: 5px solid #e9500c;
}
.navorange ul {
    list-style: none;
    padding-left: 0;
}
#biglist {
    height: 500px;
    background-color: #e3e3e3;
    border-radius: 5px;
    color: #000;
    border-color: transparent;
    margin-left: auto;
    margin-right: auto;
}

这是HTML

<div id="container">
    <div class="extradiv">
        <div class="navblue">
            <ul>
                <li> <a class="button1" href="#1">blabla</a>

                </li>
                <li> <a class="button2" href="#2">blabla</a>

                </li>
                <li> <a class="button3" href="#3">blabla</a>

                </li>
            </ul>
        </div>
        <div class="navorange">
            <ul>
                <li> <a class="button4" href="#4">blabla</a>

                </li>
                <li> <a class="button5" href="#5">blabla</a>

                </li>
                <li> <a class="button6" href="#6">blabla</a>

                </li>
            </ul>
        </div>
        <div id="biglist"></div>
    </div>
</div>

Answer 1

这是你想要的吗？

.navblue {
    position: fixed;
    left: 10%;
}
.navorange {
    position: fixed;
    right: 10%;;
}

http://jsfiddle.net/6vb5u7eg/2/

位置绝对但固定滚动

1 个答案: