Question

我有一个固定定位的导航，与它的内容对齐。单击最后一个导航项时，内容无法对齐，因为没有更多可用的滚动空间。是否有一种优雅的方式，以便最后一个导航项与内容对齐？

我想到的选项：

在空间的底部添加额外的空间（简单，但这看起来不太好）
使用将div转换为可滚动区域的插件，以便可以滚动导航本身（不确定这是否可行。也似乎是一种非常混乱的方式）

这是我现有代码的fiddle

的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');

这将始终返回所需的高度，以使导航与内容对齐

Fiddle

然而，如果屏幕较大且最后一节较短，则会有很多额外的空白区域。还有其他避免空白的想法吗？

Answer 1

您可以使用jQuery（如下面的示例）为最后一个元素添加高度。或者，您可以将高度添加到身体本身。

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

希望这有帮助！

如何滚动到页面末尾的最后一个容器

1 个答案: