向上滑動的CSS位置div

我想將動態生成的div直接放置在按鈕上方（頁面中較高，而不是Z-index）。當按鈕被點擊時，我想用反向jQuery slideToggle()來揭示div。向上滑動的CSS位置div

我已經建立了在撥弄一個例子：http://jsfiddle.net/sablefoste/YWnJE/30/

我很接近，但我似乎無法定位的揭示直接出現在按鈕的上方。我可以通過使用我的CSS position:absolute; left:0;bottom:0;，在http://www.learningjquery.com/2009/02/slide-elements-in-different-directions/的第一個示例之後使其向上滑動。

如果我將left:0; bottom:0;更改爲其他內容，則可以正確定位它，直到瀏覽器窗口調整大小爲止。

有沒有辦法做到這一點沒有蠻力（具體來說，確定#storiesbutton的頂部，jQuery重新定位#storylist底部）？

我欣賞任何想法！謝謝！

來源

2012-12-15 Sablefoste

只是讓我明白了，你想用的股利「名稱在這兒」被隱藏，直到「故事」按鈕被點擊時，點它就會出現上述同樣的按鍵向上滑動處。那是對的嗎？ – DigTheDoug

@DigTheDoug，是的，這是正確的。當創建小提琴時，我並沒有從隱藏故事列表開始。我應該包括'$（ '＃storylist'）。隱藏（）'除了標準的'$（文件）。在（「準備就緒」，（功能（E） \t {}'我會更新小提琴。顯示它 – Sablefoste

作爲一個側面說明，你可以把'顯示：none'元素本身，而不是運行'.hide（）'上第一件事 – DigTheDoug

我要去猜測純正這裏，但我的事情是，你想讓菜單出現在按鈕上方。我已經使用

var list = $('#storylist'), 
    button = $('#storiesbutton'), 
    speed = 500; 

list.hide().css('bottom', button.css('top')) 
    .css('margin-top', list.outerHeight() * -1);

所以故事的位置是基於按鈕的位置和列表的高度設置負荷試了一下。

小提琴：http://jsfiddle.net/qt3LE/

就像我，雖然說，我不是100％你是什麼之後。這可能有助於定位。

此外，我使用$.toggle(function(){}, function(){})而不是toggleSlide，因爲您可以更好地控制單個切換。

來源

2012-12-15 03:40:50 qooplmao

這是我試圖避免的「蠻力」方法，但它似乎是唯一的方法。我喜歡你的解決方案的特殊緊湊性，所以我選擇這個作爲最終答案。 – Sablefoste

我不知道，但如果你正在尋找的信息是上面的按鈕，你可以嘗試刪除position:absolute

像這樣 http://jsfiddle.net/cjds/AnpzK/

來源

2012-12-15 03:14:12 cjds

謝謝。！你的建議，但如果我這樣做刪除的絕對位置，按鈕上下移動的顯示/隱藏。 – Sablefoste

所以，當你把position: absolute該元素上，你正在將它定位爲一組固定的像素，根據它的第一個非靜態祖先。在大多數情況下和這種情況下，這將是身體本身，這就是它被困在底部的原因。你想要做的是將那個絕對定位的元素約束在另一個div中，以便它不會被定位在頁面的底部，而是在你想要的位置。所以，你會只是包裝該元素：

<div id="wrapper"> 
    <div id="storylist" style="display:none;"> 
     <ul> 
      <li> 
      Title 1 goes here. 
      </li> 
      <li> 
      Title 2 goes here. 
      </li> 
      <li> 
      Maybe a Title 3 goes here, but it is dynamically generated. 
      </li> 
     </ul> 
    </div> 
</div>

另一個DIV中，並給予新的div

#wrapper{ 
    position: relative; 
}

Here's the example in a fiddle.

來源

2012-12-15 03:34:58 DigTheDoug

謝謝！這和@aayush什雷斯塔的答案似乎爲垂直工作，但調整水平時頁面寬度，有調整瀏覽器的寬度時，仍然是一個錯位。我想不出如何應用類似的策略寬度。 – Sablefoste

你應該能夠應用您使用按鈕上的div容器使用相同的水平造型。Eit她給它一個'margin：auto'，或者一個'text-align：center'，它的寬度爲100％，這取決於你如何定位按鈕。 – DigTheDoug

你的風格再次尋找，居中該元素像按鈕的頁面的唯一辦法是要麼給它一個固定的，或者用JavaScript這樣做，很可惜。 – DigTheDoug

把按鈕欄和故事情節的容器是這樣的：

<div id="container"> 
<div id="storylist"> 
    <ul> 
     <li> 
     Title 1 goes here. 
     </li> 
     <li> 
     Title 2 goes here. 
     </li> 
     <li> 
     Maybe a Title 3 goes here, but it is dynamically generated. 
     </li> 
    </ul> 
</div> 

<div class= "buttonbar"> 
    <div> 
    <span class="navbutton" id="librarybutton" > 
     <a href ="#" title="Information"> 
      Information 
     </a> 
    </span> 
    <span class="navbutton" id="storiesbutton" > 
     <a href ="#"> 
      Stories 
     </a> 
    </span> 
    </div> 
</div>

，這裏是他們的CSS：

#container { 
position:relative; 
background:#efefef; 
} 
#storylist{ 
height:60px; 
position:absolute; 
left:0; 
bottom:0; 
} 
.buttonbar{ 
margin:20px 50px 20px 0;  
text-align:center; 
width:100%; 
position:absolute; 
bottom:-60px; 
}

我有絕對定位的按鈕欄和故事情節，所以你可以得到理想的「向上滑動」行爲。希望這是你想要的。這是我做的事情的小提琴。 http://jsfiddle.net/YWnJE/41/

來源

2012-12-15 03:41:18

向上滑動的CSS位置div

回答

相關問題