Question

以下是我正在尝试做的演示：Fiddle

我需要菜单才能到达目前的位置。然后移动c2的大小。但是，当达到c2时，我需要将菜单定位在所述div的中心。当c2 div即将向上滚动，输入div c3时，我需要使用c2上的下边距保持固定菜单。

我不知道如何做到这一点。任何人都知道我应该从哪里开始实现这个目标？

Answer 1

这是不可能的，请阅读POSITION。这个例子只留到c1而不是c3（到页脚）。这只是用Javascript / JQuery或其他插件javascript解决。

#c1{
width:100%;
    height:100px;
  background:#ff0000;
}
#clearer{
  clear:both;
  }
#c3{
width:100%;
    height:200px;
  background:#ff0000;
}
}.wrapper {
    width:100%;
}
.container {
    width:300px;
    margin:0 auto;
    height:200px;
    background:#ccc;
    position:relative;
}
.sidebar-menu {
    position:fixed;
    width:50px;
    height:70px;
    margin-left:150px;
    border:0px solid #d6d6d6;
}

<div id="c1">
    
</div>
<div class="wrapper">
    <div class="container">
        <div class="sidebar-menu">
        <ul>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
        </ul>
    </div>
    </div>
</div>
<div id="c1">
    
</div>

Answer 2

您可以使用stickyFloat插件。你的意思是这样的吗？ https://jsfiddle.net/vsync/muze8kac/3/

// forces me to write code here...

修复了容器内的滚动菜单

2 个答案: