Question

滚动时是否有任何方法可以检测到该div，当用户在页面的不同部分之间发生故障时我想到的是，我的导航区域会随着激活当时的选项而变化，例如：http：//www.blacktie.co/demo/munter /

我知道这是一个免费的platilla，但不明白代码

感谢所有

Answer 1

$(document).scroll(function(e) {
    delay(function() {

        var tops = [];

        $('.story').each(function(index, element) {
            tops.push( $(element).offset().top - 200 );
        });

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

        var lis = $('.nav > li');

        for ( var i=tops.length-1; i>=0; i-- ) {
            if ( scroll_top >= tops[i] ) {
                menu_focus( lis[i], i+1 );
                break;
            }
        }
    },
    pause);
});

这部分代码是最重要的。此函数位于script.js文件中，每次用户滚动网站时都会运行。

首先创建一个名为op tops的数组，接下来它遍及整个页面并从包含“故事”类

的每个元素的顶部获得偏移量

例如：

<!-- === Slide 2 === -->
    <div class="slide story" id="slide-2" data-slide="2">

or

<!-- === SLide 3 - Portfolio -->
<div class="slide story" id="slide-3" data-slide="3">

此后，创建名为“scroll_top”的变量。此变量保存从当前位置顶部的偏移量

接下来，使用“var lis = $('.nav > li');”创建一个列表项数组然后，运行一个for循环，检查网页的每个部分（为其分配了一个列表项）。它从下到上运行（i - ）。

如果scrollTop（当前偏移量）大于或等于具有“故事”类别的div的偏移量，则表示您将悬停在该故事之上。那里，这是应该是活动的列表项，因此“menu_focus（）”将运行。

使用menu_focus的代码。

function menu_focus( element, i ) {
    if ( $(element).hasClass('active') ) {
        if ( i == 6 ) {
            if ( $('.navbar').hasClass('inv') == false )
                return;
        } else {
            return;
        }
    }

    enable_arrows( i );

    if ( i == 1 || i == 6 )
        $('.navbar').removeClass('inv');
    else
        $('.navbar').addClass('inv');

    $('.nav > li').removeClass('active');
    $(element).addClass('active');

    var icon = $(element).find('.icon');

    var left_pos = icon.offset().left - $('.nav').offset().left;
    var el_width = icon.width() + $(element).find('.text').width() + 10;

    $('.active-menu').stop(false, false).animate(
        {
            left: left_pos,
            width: el_width
        },
        1500,
        'easeInOutQuart'
    );
}

此功能首先检查您是否已经在同一个活动菜单上，或者您是否在最后一个菜单项上。当这是真的时，它返回，函数将退出。

但是，如果这是假的（并且您需要更改当前的活动菜单项）。这是通过以下代码完成的：

$('.nav > li').removeClass('active');
$(element).addClass('active');

从所有列表项中删除活动状态，然后将其添加到当前列表项。

代码的最后一部分将检查列表项的长度并根据它创建一行。此外，$('.active-menu').stop(false, false).animate(部分将为该栏设置动画。这意味着它不会直接跳到下一个但它会缓慢滑动（需要1500毫秒。）

我希望这有助于您理解代码。如果没有，请向我提出进一步的解释！

问候！

使效果导航

1 个答案: