添加使用jQuery滾動時移動的動態div

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包裝到它們兩者上，並簡單地顯示/隱藏按鈕單擊時的信息。 它將跟隨頁面滾動。

演示： 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;
}