Question

我想在向下/向上滚动时检测屏幕上哪个元素可见。我必须在菜单上设置为活动菜单项，以此为目标。

// must have a page class
$('.page').each(function(){
    $positionData[$(this).attr('id')] = $(this).offset().top;
});

$(document).scroll(function(){
    var $position = $(this).scrollTop();
    if($position > $height && !$body.hasClass('scrolled')) {
        $body.addClass('scrolled');

        //detech the scroll is between an element offset
    } else if($position < $height) {
        $body.removeClass('scrolled');
    }
});

有什么想法吗？

Answer 1

您可以使用jquery插件inview（github）来执行此操作。

$('.scrollWatch').bind('inview', function (event, visible) {
    if (visible) {
        // do something here
        $(this).addClass('scrolled');
        $(this).text('mom! I\'m here.');
    } else {
        // do something here with invisible
        $(this).removeClass('scrolled');
        $(this).text('1');
    }
});

我为您创建了一个演示jsfiddle，请使用DevTools查看HTML中的哪些更改。

Answer 2

对于Bootstrap个用户;

已经有一个名为Scrollspy的组件。

Scrollspy

如何使用？

1：为身体增加相对定位。

body {
    position: relative;
}

2：添加数据-spy =＆＃34;滚动＆＃34;和data-target =＆＃34;＆＃34;属于你的身体。（数据目标必须以您的菜单为目标）

<body data-spy="scroll" data-target="#navbar-example">

3：设置菜单。不要将导航类添加到ul / ol元素中。

<div id="navbar-example">
    <ul class="nav">
        <li><a href="#home">HOME</a></li>
        <li><a href="#project">PROJECT</a></li>
    </ul>
</div>

4：检查目标元素，每个元素必须具有与链接目标相同的id属性。

<div id="home"></div>

如何使用滚动位置检测屏幕中心的哪个元素？

2 个答案: