0

基本上我想要实现的是为我的网站制作一个寻呼机。基本上有一个索引页面，例如，如果有人点击“服务”，它会将他们发送到服务页面。此“服务”页面将显示 5 或 6 个服务，全部在一个页面中。所以基本上当用户点击导航项时，它会使用 jQuery 滚动到显示信息的 div。

现在我不希望用户看到他/她实际正在阅读的部分。例如，我有一个名为 Edition 的服务和另一个 Conception。如果我正在阅读“版本”部分，我不想现在就看到“概念”，除非我滚动到它。我的第一个想法是使用边距，但我的意思是，如果我在 1024x768 显示器上，边距将与 1920x1080 不同。

所以基本上，我正在寻找一种在一个页面上显示我的服务内容的方法，但是会显示每个不同的服务，除非访问者滚动，否则看不到它下面的下一部分。

希望这是有道理的，并感谢任何支持和帮助！

4

3 回答 3

4

好吧，您需要定义一个导航栏类，以及一个用于存储页面每个部分的类。将部分的高度设置为 100% 将确保该部分占据用户屏幕的整个高度。请注意，这仅在 html 和 body 的高度也设置为 100% 时才有效。

设置导航，使位置固定在屏幕上，并使用链接调用 javascript 函数，该函数根据链接的 id 导航到正确的部分。

html:

<nav>
    <a class="nav" id="1" href="#">Section 1</a>
    <a class="nav" id="2" href="#">Section 2</a>
    <a class="nav" id="3" href="#">Section 3</a>
</nav>
<div class="section" id="1">
    Section 1
</div>
<div class="section" id="2">
    Section 2
</div>
<div class="section" id="3">
    Section 3
</div>

CSS：

a {
    margin: 0 10px 0 10px;
    text-decoration: none;
    color: black;
}

html {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
}

nav {
    position: fixed;
    width: 100%;
    background-color: lightgrey;
    text-align: center;
    margin-bottom: 20px;
}

.section {
    height: 100%;
    padding-top: 20px;
}

js：

$('.nav').click(function() {
    var id = $(this).attr('id');
    $('html, body').animate({
        scrollTop: ($('#' + id + '.section').offset().top)
    }, 1000);
});

演示：

http://jsfiddle.net/dqcuN/2/

希望这就是你要找的。

于 2014-07-18T20:44:30.433 回答
0

I guess by image you uploaded that this is what you are looking for:

HTML

<article>
<h1>Edition</h1>
<div>Sed ut perspiciatis unde omnis iste natus error sit </div>
</article>

CSS

html {height: 100%;}
body {margin: 0; padding: 0; height: 100%;}
article {width: 500px; height:100%; margin: 0 auto;}​

http://jsfiddle.net/5HLNE/

于 2012-06-08T10:17:18.083 回答
0

您需要在 HTML 页面中包含分页技术，因此您需要为每个部分提供一个 id 和一个超链接。

于 2014-07-18T20:10:38.730 回答