Question

我想在单击按钮时动态显示一个div。我使用以下代码执行此操作：

$('#mainId').css({ 'top': position, "position": "absolute", "class": "editingContent", "display": "none" });
$('#mainId').slideToggle("fast");

其中mainid是我要显示的div的id。

问题是即使我向下滚动，这个div仍保持在同一位置。我尝试将位置更改为相对位置 - 但在这种情况下，div最终位于页面的末尾，

我希望这个div显示在单击按钮旁边。但是当我向上（或向下）滚动网页时，它也应该向上（或向下）移动。

jsfiddle：http://jsfiddle.net/5L5p523b/

有办法做到这一点吗？

Answer 1

您显然还有更多工作要做，但允许内容div使用父元素滚动的简单答案是将父div设置为相对位置，以便绝对定位的内容div相对于外部div定位。这是更新的小提琴：

<div style="height:50px;overflow:auto; position:relative">

    <button id="ibutton"> Content </button>
    <div id="somediv">Here is the content.</div>

https://jsfiddle.net/5L5p523b/1/

请记住，这可以实现您的要求，但我老老实实地考虑浮动这些元素，并使用动画切换显示/隐藏（因为这是您在小提琴中所做的事情），以获得更灵活的布局。如果你有时间研究，那里也有纯粹的css3解决方案。

Answer 2

由于您是手动创建按钮和信息，为什么不将div包装到它们两者中，并简单地显示/隐藏按钮单击时的信息。它将跟随页面滚动。

DEMO：http://jsfiddle.net/yeyene/5L5p523b/2/

HTML

<div style="height:500px;overflow:auto;">
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <div class="btn-div">
        <button id="ibutton2" class="ibtn">Content</button>
        <div id="somediv2" class="info">Here is the content.</div>
    </div>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <div class="btn-div">
        <button id="ibutton" class="ibtn">Content</button>
        <div id="somediv" class="info">Here is the content.</div>
    </div>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
</div>

CSS

.btn-div {
    float:left;
    width:100%;
    padding:10px;
}
.info {
    display:none;
}

添加一个动态div，使用jquery滚动时移动

2 个答案:

DEMO：http://jsfiddle.net/yeyene/5L5p523b/2/

HTML

CSS