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 回答