Question

我有一个侧面导航菜单，其链接如下所示：

<div class="side_nav_feature_cont scrollElement" id="scrollE5">
<a class="pageScroller" data-scrollto="sec5">
    <span class="side_nav_feature_item">Develop and Nurture your Talent</span>  
    </a>
</div>

单击它们时，它们会滚动到一个包含锚点的部分，如下所示：

<div class="sec5 sectionAnchor"></div>

脚本的滚动部分工作正常，但是当它进入视口的一半时，我还想在侧面导航项中添加一个活动类。我使用以下脚本来检查项目的中途，但我仍然需要根据锚的类“找到”匹配的“data-scrollto”。

$(window).on('scroll', function() {
        var halfWay = $(window).height()/2; // get half height of window
        $('.sectionAnchor').each(function() { // check each section anchor
            var distance = $(this).offset().top - halfWay; // check when halfway from top
            if ($(window).scrollTop() >= distance) {
                // I want to find the matching data-scrollto here and add an active class
            }
        });

是否可以将sectionAnchor类中的“sec5”与导航项的data-scrollto“sec5”相匹配？

Answer 1

我使用这个小jquery函数，它只检查指定的数据属性是否与给定值匹配。

$.fn.filterByData = function (name, value) {
    return this.filter(function () {
        return $(this).data(name) === value;
    });
};

因此，您的代码看起来像这样，假设锚标记的数据属性中的类始终是列表中的第一个类：

$(window).on('scroll', function () {
    var halfWay = $(window).height() / 2; // get half height of window
    $('.sectionAnchor').each(function () { // check each section anchor
        var distance = $(this).offset().top - halfWay; // check when halfway from top
        if ($(window).scrollTop() >= distance) {
            var classString = $(this).attr('class');
            if (classString) {
                //Get first class from class string
                var target = classString.split(' ')[0];
                //Find anchors and filter by data-scrollto == our class name
                var navItem = $('.pageScroller').filterByData('scrollto', target);

                navItem.addClass('active');
            }
        }
    });
});

Answer 2

尝试使用match函数从sectionAnchor获取类。然后使用属性选择器获取正确的菜单选项。

$(window).on('scroll', function() {
        var halfWay = $(window).height()/2; // get half height of window
        $('.sectionAnchor').each(function() { // check each section anchor
            var distance = $(this).offset().top - halfWay; // check when halfway from top
            if ($(window).scrollTop() >= distance) {
                // I want to find the matching data-scrollto here and add an active class
                var id = $(this).attr('class').match(/(sec\d*)/)[0];
                $('a.pageScroller[data-scrollto="' + id + '"]').addClass('active');
            }
        });

查找与viewport中元素的类匹配的html5数据属性

2 个答案: