CSS - 在固定定位元素下滾動內容？

HTML：CSS - 在固定定位元素下滾動內容？

<div id="container"> 
    <ul> 
     <li><a href="#first">first</a></li> 
     <li><a href="#second">second</a></li> 
     <li><a href="#third">third</a></li> 
    </ul> 
    <div id="somecontainer"> 
     <div id="first"> 
     </div> 
     <div id="second"> 
     </div> 
     <div id="third"> 
     </div> 
    </div> 
</div>

DEMO： http://jsfiddle.net/JRnDz/

問題： 當你點擊一個名爲「第二」的鏈接，該頁面應該跳轉到div id爲「秒」。但是，它不會顯示整個div，而只是其中的一部分（150px-50px = 100px）。 div的頂部被切斷。

問題： 如何在點擊「第二個」鏈接後顯示整個div？

我曾嘗試： 添加相對定位和頂部：50像素到容器：

#container { 
    position: relative; 
    top: 50px; 
}

來源

2013-02-12 RhymeGuy

你可以試試這個：

<div id="container"> 
<ul> 
    <li><a href="#first">first</a></li> 
    <li><a href="#secondJump">second</a></li> 
    <li><a href="#third">third</a></li> 
</ul> 
<div id="someconteiner"> 
    <div id="first"> 
    </div> 
    <a name="secondJump"></a> 
    <div id="second"> 
    </div> 
    <div id="third"> 
    </div> 
</div> 
</div>

把你想跳的位置作爲您想要跳轉到的div上方的錨點。

很明顯，你會爲第一和第三做同樣的事情。

編輯：嘗試簡單地從你的UL

來源

2013-02-12 12:34:43 jpsnow72

試過了。和以前一樣的效果。 – RhymeGuy 2013-02-12 12:42:17

ul是否需要修復？那是你的問題。我更新了你的jsfiddle – jpsnow72 2013-02-12 12:47:49

是的，它必須是固定的。 – RhymeGuy 2013-02-12 12:54:38

的由@ ipsnow72書面溶液除去固定的位置是更加清晰。

如果您願意，可以使用jquery的插件ScrollTo並使用offset參數。 http://demos.flesler.com/jquery/scrollTo/

$(...).scrollTo('#yourelement', {offset:-50});

來源

2013-02-12 12:51:03

正如我重播ipsnow72答案：「它不工作」。所以它不是我的解決方案..至於jQuery，我會稍後添加它，現在我需要解決這個問題。 – RhymeGuy 2013-02-12 12:53:52

有了這個jQuery腳本，你可以解決你的問題。 – 2013-02-12 12:58:47

如何：

<div id="container"> 
<ul> 
    <li><a href="#first">first</a></li> 
    <li><a href="#secondAnchor">second</a></li> 
    <li><a href="#third">third</a></li> 
</ul> 
<div id="someconteiner"> 
    <div id="first"> 
    </div> 
    <a name="secondAnchor" style="padding-top: 50px; margin-top: -50px;"></a> 
    <div id="second"> 
    </div> 
    <div id="third"> 
    </div> 
</div> 
</div>

參見：Fixed position navbar obscures anchors

來源

2013-02-12 13:02:03 jpsnow72

這要看什麼用此代碼，但如果添加

#someconteiner div{ 
    padding-top:50px; 
    margin-bottom:-50px; 
    position:relative; 
    display:block; 
}

和娛樂有點z指標它的工作原理：http://jsfiddle.net/JRnDz/2/

來源

2013-02-12 13:35:13 Jan

CSS - 在固定定位元素下滾動內容？

回答

相關問題