0

コンテンツに合わせて配置された固定ナビゲーションがあります。最後のナビゲーション アイテムをクリックすると、使用可能なスクロール スペースがなくなるため、コンテンツが整列できません。最後のナビゲーション項目がコンテンツと一致するようにエレガントな方法はありますか?

私の頭に浮かんだオプション：

  • スペースの下部に余分なスペースを追加します (単純ですが、これは見栄えがよくありません)。
  • ナビゲーション自体をスクロールできるようにdivをスクロール可能な領域に変えるプラグインを使用する（これが可能かどうかはわかりません。また、かなり面倒な方法のようです）

ここに私の既存のコードのフィドルがあります

CSS:

.section {
    background-color: #cccccc;
    margin:20px;
}
#nav {
    position:fixed;
    top:0px;
    right:20px;
    float: right;
    margin:20px;
}
#section-1 {
    height: 300px
}
#section-2 {
    height: 200px
}
#section-3 {
    height: 500px
}
#section-4 {
    height: 300px
}
#section-5 {
    height: 200px
}
#section-6 {
    height: 200px
}

私のコード:

<ul id="nav">
    <li class="current"><a href="#section-1">Section 1</a>

    </li>
    <li><a href="#section-2">Section 2</a>

    </li>
    <li><a href="#section-3">Section 3</a>

    </li>
    <li><a href="#section-4">Section 4</a>

    </li>
    <li><a href="#section-5">Section 5</a>

    </li>
    <li><a href="#section-6">Section 6</a>

    </li>
</ul>
<div class="section" id="section-1">section1</div>
<div class="section" id="section-2">section2</div>
<div class="section" id="section-3">section3</div>
<div class="section" id="section-4">section4</div>
<div class="section" id="section-5">section5</div>
<div class="section" id="section-6">section6</div>

Albertos スクリプトに従って、次のスクリプトを作成しました。

// height of the last section
var last_section_height = parseInt($( "#section-6" ).css('height'), 10);

// height of the viewport - hight of the last section + extra height of margins
var height = $(window).height() - last_section_height + 180;
    $('#section-6').css('height', height+'px');

これにより、ナビゲーションをコンテンツに合わせて配置するために必要な高さが常に返されます

フィドル

ただし、画面が大きく、最後のセクションが短い場合は、余白が多くなります。空白を避けるための他のアイデアはありますか?

4

1 に答える 1

0

以下の例のように、jQuery を使用して、最後の要素に高さを追加できます。または、本体自体に高さを追加することもできます。

$(document).ready(function() {
    var height = $(document).height()+300;
    $('#section-6').css('height', height+'px');
});

お役に立てれば！

于 2013-02-01T21:02:54.577 に答える