滾動窗口的DIV

晚上好，滾動窗口的DIV

我一直在努力，現在推測這個問題了一段時間，但我似乎無法找到足夠的資源在網上一可行的解決方案 - 也許我不看夠硬。

無論如何，我想要做的是有6個div全部在頁面上 - 使窗口可以滾動。我打算有一個導航欄，它是在其他所有內容的z索引上的，包含用於觸發滾動的鏈接。

所有我需要了解的是它的jQuery部分，以及我需要引用哪些文件。

PS。如果你認爲你知道你的東西，你會介意告訴我浮動div是否可以被jQuery的「偏移」函數讀取？我正在考慮使用一個表格並將不同的div存儲在該表格的單元格中。：S我討厭表格...

謝謝你的幫助。

來源

2010-08-29 zeddotes

你的問題是什麼？ – 2010-08-29 17:41:02

那麼你是說你的問題是你有一些DIV，你想從導航鏈接滾動到他們？

你不需要JQuery，你甚至不需要Javascript。只需在每個DIV的開頭放置一個錨標籤並導航至該標籤。

<DIV id="navigationBar"> 
    <a href="#section1_nav">Go to section 1</a> 
    <a href="#section2_nav">Go to section 2</a> 
</DIV> 

<DIV id="section1"> 
    <a name="section1_nav"></a> 
</DIV> 

<DIV id="section2"> 
    <a name="section2_nav"></a> 
</DIV>

來源

2010-08-29 17:45:36

爲你定位<div>的是用CSS絕對定位，你可以瞭解更多關於in this guide最簡單的方法。這是最一致顯示的跨瀏覽器和將讓您對其中集裝箱被放置細粒度的控制：

<ul id="nav"> 
    <li><a href="#first">First</a></li> 
    <li><a href="#second">Second</a></li> 
    <li><a href="#third">Third</a></li>  
</ul> 
<div id="first">First content container</div> 
<div id="second">Second content container</div> 
<div id="third">Third content container</div>

有了大致如下CSS：

ul { 
    position: fixed; 
    z-index: 2; 
    top: 20px; 
    right: 20px; 
} 

div { 
    position: absolute; 
    z-index: 1; 
    width: 100px; 
    height: 100px;  
} 

#first { 
    top: 10px; 
    left: 10px; 
} 

#second { 
    top: 1000px; 
    left: 500px; 
} 

#third { 
    top: 500px; 
    left: 100px; 
}

然後實際滾動到上點擊不同的<div>的，你可以使用jQuery scrollTo plugin：

$('a').click(function(e) { 
    // Stop default link click from occuring 
    e.preventDefault(); 

    // Scroll to the position using the jQuery scrollTo plugin 
    // Element id is taken from link's href attribute 
    $(window).scrollTo($(this).attr('href'), {duration: 500}); 
});

你可以看到一個簡單的例子in action here。

來源

2010-08-29 18:04:44 Pat

滾動窗口的DIV

回答

相關問題