滚动窗口的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

回答

相关问题