Question

我有一个导航菜单，该菜单由点组成，每个点均指向具有ID的特定div。我需要的是在屏幕上显示特定的div时使点变大。假设，如果我向下滚动到“ where”部分，我希望指向该部分的点得到一个“ active”类，这样我就可以使用CSS产生一些视觉效果。

<nav class="header__nav">
    <ul class="header__list">
        <li class="header__list-item">
            <a href="#intro"></a>
        </li>
        <li class="header__list-item">
            <a href="#about"></a>
        </li>
        <li class="header__list-item">
            <a href="#range"></a>
        </li>
        <li class="header__list-item">
            <a href="#why-us"></a>
        </li>
        <li class="header__list-item">
            <a href="#where"></a>
        </li>
        <li class="header__list-item">
            <a href="#footer"></a>
        </li>
    </ul>
</nav>

js

$(document).ready(function(){
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();

        var target = this.hash;
        var $target = $(target);

        $('html, body').animate({
            'scrollTop': $target.offset().top
        }, 1000, 'swing');
    });
});

Answer 1

您可以创建一个函数来扩展jQuery。因此，您可以轻松检查元素是否在视口中：

$.fn.elementIsInViewport = function() {

    var
    elementTop = $(this).offset().top,
    elementBottom = elementTop + $(this).outerHeight(),
    viewportTop = $(window).scrollTop(),
    viewportBottom = viewportTop + $(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;

};

然后您可以像使用它一样

$(window).on('resize scroll', function() {

    if ($('#where').elementisInViewport()) {

        // do something

    } else {

        // do something else

    } });

Answer 2

下面的脚本将在滚动时执行，并选中将类名“ active”添加到屏幕上可见的指定导航菜单。

 var $sections = $('.box');
    $(window).scroll(function () {
        var currentScroll = $(this).scrollTop();
        var $currentSection
        $sections.each(function () {
            var divPosition = $(this).offset().top;
            if (divPosition - 100 < currentScroll) {
                $currentSection = $(this);
            }
            if ($currentSection) {
                var id = $currentSection.attr('id');
                $('a').removeClass('active');
                $("[href='#" + id + "']").addClass('active');
            }
        })

    });

集成代码。

    $(document).ready(function () {
        $('a[href^="#"]').on('click', function (e) {
            e.preventDefault();

            var target = this.hash;
            var $target = $(target);

            $('html, body').animate({
                'scrollTop': $target.offset().top
            }, 1000, 'swing');
        });

        var $sections = $('.box');
        $(window).scroll(function () {
            var currentScroll = $(this).scrollTop();
            var $currentSection
            $sections.each(function () {
                var divPosition = $(this).offset().top;
                if (divPosition - 100 < currentScroll) {
                    $currentSection = $(this);
                }
                if ($currentSection) {
                    var id = $currentSection.attr('id');
                    $('a').removeClass('active');
                    $("[href='#" + id + "']").addClass('active');
                }
            })

        });
    });

    ul {
        position: fixed;
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        border: 1px solid #e7e7e7;
        background-color: #f3f3f3;
    }

    li {
        float: left;
    }

        li a {
            display: block;
            color: #666;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

            li a:hover:not(.active) {
                background-color: #ddd;
            }

            li a.active {
                color: white;
                background-color: #4CAF50;
            }

    .box {
        padding-top: 80px;
        height: 100px;
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <nav class="header__nav">
        <ul class="header__list">
            <li class="header__list-item">
                <a href="#intro">intro</a>
            </li>
            <li class="header__list-item">
                <a href="#about">about</a>
            </li>
            <li class="header__list-item">
                <a href="#range">range</a>
            </li>
            <li class="header__list-item">
                <a href="#why-us">why-us</a>
            </li>
            <li class="header__list-item">
                <a href="#where">where</a>
            </li>
            <li class="header__list-item">
                <a href="#footer">footer</a>
            </li>
        </ul>
    </nav>
    <div>
        <div id="intro" class="box">Introduction</div>
        <div id="about" class="box">About us</div>
        <div id="range" class="box">Range</div>
        <div id="why-us" class="box">why us</div>
        <div id="where" class="box">where</div>
        <div id="footer" class="box">footer</div>
    </div>

检查屏幕上是否存在特定部分，以将类添加到特定导航项

2 个答案: