Question

我的网页上有一个div（让我们称之为div A）position:fixed这很好。然而，在该div中我有几个其他div（让我们称之为div 1,2和3），我想在访问者使用滚动条时移动它。

我怎样才能告诉div 1,2和amp; 3跟随滚动条位置？

HTML：

<section class="block">
  <div class="full-width blue">
  </div>

  <div class="full-width green">
  </div>

  <div class="full-width orange">
  </div>
</section>

CSS：

.block{
    width: 300px;
    height: 104px;
    position: fixed;
    left: 1em;
    top: 1em;
    z-index: 999;
}

.full-width类只是告诉div运行其容器的整个宽度。

Answer 1

这样的东西？：

<强> HTML

<section class="block">
    <div class="full-width blue">
    </div>

    <div class="full-width green">
    </div>

    <div class="full-width orange">
    </div>
</section>

<强> CSS

.block{
    width: 300px;
    height: 104px;
    position: fixed;
    left: 1em;
    top: 1em;
    z-index: 999;
    background-color: #CCC;
    overflow-y: hidden;
    overflow-x: scroll;
    white-space: nowrap;

}
.full-width {
    display: inline-block;
    width: 300px;
    height: 104px;
}
.blue {
    background-color: #00CCFF;
}
.green {
    background-color: #CCFF00;
}
.orange {
    background-color: #FFCC00;
}

http://jsfiddle.net/rmy6g8v2/

或者像这样？：

我稍微修改了@deebs提供的小提琴

http://jsfiddle.net/0h6fuyb2/1/

Answer 2

如果你做这样的事情得到滚动高度然后匹配彩色div的css，或者甚至用这个滚动高度包装那些div的容器怎么办：

$(document).ready(function () {
    window.onscroll = scrollFunction;
    function scrollFunction() {
        var doc = document.documentElement, body = document.body;
        var top = (doc && doc.scrollTop  || body && body.scrollTop  || 0);
        $('.blue').css("margin-top", top) 
    }
});

修订后的代码

我制作了fiddle，但我不确定这是你想要的“滚动匹配”。

Answer 3

你应该使用overflow:scroll;在wrapper中包含scroll属性的所有div。请查看此链接jsfiddle以查看工作示例。

如果您不想看滚动条，这是另一种解决方案jsfiddle

希望它有用！

使用固定div内的滚动条移动div

3 个答案: