javascript - 事件菜单部分高度问题

Question

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

通过向该部分添加“display: table”或“overflow: hidden”来解决这个问题，但会扰乱菜单的事件状态行为。

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

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

如有任何建议，我们将不胜感激。谢谢。

JSFiddle

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;
            }
        }
    });
});

Answer 1

或者您可以使用 CSS 方式在不编辑标记的情况下修复 float 。

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