0

基本的に私が達成しようとしているのは、自分の Web サイト用の 1 ページャーを作成することです。基本的にインデックス ページがあり、たとえば、誰かが「サービス」をクリックすると、サービス ページに送信されます。この「サービス」ページには、5 つまたは 6 つのサービスがすべて 1 ページに表示されます。基本的に、ユーザーがナビゲーション項目をクリックすると、jQuery を使用して、情報が表示される div にスクロールします。

今私が望んでいないのは、ユーザーが実際に読んでいるセクションの下のセクションを見ることです。たとえば、Edition というサービスと別の Conception があります。「エディション」セクションを読んでいる場合、スクロールしない限り、「概念」を今すぐ見たくありません。私が最初に考えたのは余白の使用でしたが、1024x768 ディスプレイを使用している場合、余白は 1920x1080 と同じではありません。

基本的に、サービスのコンテンツを 1 ページに表示する方法を探していますが、それぞれのサービスが表示されるため、訪問者がスクロールしない限り、その下の次のセクションは表示されません。

サポートとヘルプに感謝します。

4

3 に答える 3

4

ナビゲーション バー クラスと、ページの各セクションを格納するために使用されるクラスを定義する必要があります。セクションの高さを 100% に設定すると、セクションがユーザーの画面の高さ全体を占めるようになります。これは、html と本文の両方の高さが 100% に設定されている場合にのみ機能することに注意してください。

画面上の位置が固定されるようにナビゲーションを設定し、リンクを使用して、リンクの ID に基づいて正しいセクションに移動する JavaScript 関数を呼び出します。

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

あなたがアップロードした画像から、これがあなたが探しているものだと思います：

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 に答える