部分高度的活动菜单问题答案

【问题标题】：Active menu Issue with sections height部分高度的活动菜单问题
【发布时间】：2015-03-18 04:28:37
【问题描述】：

只要每个部分中的内容不超过部分高度，以下设置就可以正常工作。当它发生时，如您在示例中所见，内容会超出包含部分。

通过向该部分添加“显示：表格”或“溢出：隐藏”来解决此问题可以解决此问题，但会弄乱菜单的活动状态行为。

我还尝试将部分高度设置为自动而不是 100%，但这会扰乱整个布局，因为部分开始相互重叠。

我迫切需要帮助，因为这个项目的整个布局都取决于是否正确。

任何建议将不胜感激。谢谢。

HTML

<header>
    <nav>
        <ul>
            <li><a class="link active" href="#section_one">Section One</a>
            </li>
            <li><a class="link" href="#section_two">Section Two</a>
            </li>
            <li><a class="link" href="#section_three">Section Three</a>
            </li>
            <li><a class="link" href="#section_four">Section Four</a>
            </li>
        </ul>
    </nav>
</header>


<section id="section_one"></section>

<section id="section_two">

<div class="row">

    <div class="column-left"><img src="https://cdn0.iconfinder.com/data/icons/PRACTIKA/256/twitter.png"><br>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.<p></div>

    <div class="column-left"><img src="https://cdn0.iconfinder.com/data/icons/PRACTIKA/256/twitter.png"><br>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.<p></div>

    <div class="column-left"><img src="https://cdn0.iconfinder.com/data/icons/PRACTIKA/256/twitter.png"><br>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.<p></div>

    <div class="column-last"><img src="https://cdn0.iconfinder.com/data/icons/PRACTIKA/256/twitter.png"><br>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.<p></div>

</div>

<div class="row">

    <div class="column-left"><img src="https://cdn0.iconfinder.com/data/icons/PRACTIKA/256/twitter.png"><br>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.<p></div>

    <div class="column-left"><img src="https://cdn0.iconfinder.com/data/icons/PRACTIKA/256/twitter.png"><br>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.<p></div>

    <div class="column-left"><img src="https://cdn0.iconfinder.com/data/icons/PRACTIKA/256/twitter.png"><br>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.<p></div>

    <div class="column-last"><img src="https://cdn0.iconfinder.com/data/icons/PRACTIKA/256/twitter.png"><br>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.<p></div>

</div>

<div class="row">

    <div class="column-left"><img src="https://cdn0.iconfinder.com/data/icons/PRACTIKA/256/twitter.png"><br>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.<p></div>

    <div class="column-left"><img src="https://cdn0.iconfinder.com/data/icons/PRACTIKA/256/twitter.png"><br>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.<p></div>

    <div class="column-left"><img src="https://cdn0.iconfinder.com/data/icons/PRACTIKA/256/twitter.png"><br>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.<p></div>

    <div class="column-last"><img src="https://cdn0.iconfinder.com/data/icons/PRACTIKA/256/twitter.png"><br>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.<p></div>

</div>

</section>

<section id="section_three"></section>
<section id="section_four"></section>

CSS

* {
    margin: 0;
    padding: 0;
    border: 0px none;
    font-family: "Calibri", sans-serif;
    font-weight: 700;
    font-size: 16px;
    vertical-align: top;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box
}

 html, body {
    height: 100%
}

header {
    background: #CCCCCC;
    position: fixed;
    left: 0px;
    top: 0px;
    height: 40px;
    width: 100%
}

nav {
    text-align: center;
}
nav ul {
    display: inline-block;
    text-align: center;
}
nav ul li {
    float: left;
    line-height: 40px;
    list-style-type: none;
    padding: 0px 10px;
}
nav ul li a {
    color: #999999;
    text-decoration: none;
}
nav ul li a.active {
    color: #222222;
    text-decoration: underline;
}

section {
    min-height: 100%;
    width: 100%;
}

#section_one {
    background: #BBBBBB;
}

#section_two {
    background: #999999;
}

#section_three {
    background: #777777;
}

#section_four {
    background: #999999;
}

.row {
    margin-left: auto;
    margin-right: auto; 
    width: 80%;
    max-width: 1600px;
}

.column-left { float: left; width: 25%; }
.column-last { float: right; width: 25%; }

.row p {
    color: #fff;
    font-weight: 400;
    font-size: 14px;
    text-align: left;
    line-height: 1.3;
    padding-left: 10%;
    padding-right: 10%;
}

.row img {
    width: 80%;
    height: auto;
    padding-top: 40px;
    padding-bottom: 20px;
}

JavaScript

//-------- Script has negative scrolling of 40px for Header compensation --------:

$(document).ready(function () {
    $(window).scroll(function () {

        var y = $(this).scrollTop();

        $('.link').each(function (event) {
            if (y >= $($(this).attr('href')).offset().top - 40) {
                $('.link').not(this).removeClass('active');
                $(this).addClass('active');
            }
        });

    });
});

//------- This part adds smooth scrolling --------:

$(function () {
    $('a[href*=#]:not([href=#])').click(function () {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: (target.offset().top - 40)
                }, 850);
                return false;
            }
        }
    });
});

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

或者您可以使用 CSS 方式来修复浮动而不编辑标记。

section:after {
    display: table;
    content: "";
    clear: both;
}

【讨论】：

非常感谢您的时间和精力，我已经尝试过您的方法，但仍然会弄乱菜单。你可以自己试试；您会注意到菜单链接不再正确更改为活动状态。这就是整个问题......
您好，如果您点击第三个和第四个链接，您会看到它们不会改变，除非您使用鼠标滚轮，然后，如果您点击第二个，第一个会变为活动状态.这两天我一直在尝试解决这个问题......
@DavidMartins 尝试更大的数字，即(y >= $($(this).attr('href')).offset().top - 45) 或更小的数字。
按照您的建议，偏移量中的更大数字就可以了。你是最好的。非常感谢

【解决方案2】：

你只需要清除你的花车。如果你添加这个：

<br style="clear: both" />

在您的部分结束时，它将起作用：JSFiddle

这个问题和问题中的原始小提琴在 IE 中都不能正常工作。我在这一行将 '40' 更改为 '39' 并解决了 IE 中的问题：

scrollTop: (target.offset().top - 39)

【讨论】：

非常感谢您的时间和精力，但正如您在示例中看到的那样，在这样做之后，菜单链接不再正确地变为活动状态。这就是整个问题...
您没有看到菜单链接变为黑色并带有下划线吗？你用的是什么浏览器？
您好，关于哪些浏览器的好点...它适用于除 Firefox 和 IE 之外的所有浏览器。如果您单击第三个和第四个链接，您会看到它们不会改变，除非您使用鼠标滚轮，然后，如果您单击第二个，第一个会变为活动状态。这两天我一直在尝试解决这个问题......
在我编辑之前，我看到它在 Firefox（版本 36）和 Chrome（版本 42）中正常工作。它和你的小提琴在 IE10 中都有错误。该修复适用于所有三种浏览器以及在 IE9 模式下运行的 IE10。（当我尝试在 IE8 模式下运行时，JSFiddle 本身就坏了）
非常感谢您的帮助。事实证明，在添加“clear: both”后使用 Offset 解决了这个问题。最良好的祝愿。