如何在到达锚标签时运行javascript函数？

Is it possible to run a javascript function when you pass a page section? What I am trying to achieve is something akin to Twitter Bootstrap's scrollspy.

传递页面部分时是否可以运行javascript函数？我想要实现的是类似于Twitter Bootstrap的scrollspy。

3 个解决方案

#1

You can use the waypoints plugin:

您可以使用航点插件：

http://imakewebthings.com/jquery-waypoints/

Waypoints is a jQuery plugin that makes it easy to execute a function whenever you scroll to an element.

Waypoints是一个jQuery插件，可以在滚动到元素时轻松执行函数。

#2

Here's a fiddle that accomplishes the behavior you are looking for by registering a custom event on the a elements that's triggered based on a logic that you can customize as you see fit.

这是一个小提琴，通过在基于您可以根据需要自定义的逻辑触发的元素上注册自定义事件来完成您正在寻找的行为。

In the example the event is triggered when the a elements' position is within the range 0 to 100 from the top of the visible portion of the document.

在该示例中，当元素的位置在距文档的可见部分的顶部0到100的范围内时触发事件。

$(function() {
    $('a').on('reached', function() {
        alert('Reached ' + $(this).attr('id'));
    });
    $(document).on('scroll', function() {
        $('a').each(function() {
            var wt = $(window).scrollTop();
            var at = $(this).position().top;
            var dt = at - wt;
            if( dt >= 0 && dt < 100)
                $(this).trigger('reached');
        });
    });
})

Hope it helps.

希望能帮助到你。

#3

You can use scrollTop function of jQuery.

您可以使用jQuery的scrollTop函数。

You can get the anchor tag position using position() function and tries to match it with scrollTop return value.

您可以使用position（）函数获取锚标记位置，并尝试将其与scrollTop返回值匹配。

#1