使jQuery Waypoints Offset Relative

时间:2014-07-03 17:38:24

标签: javascript jquery jquery-waypoints

您知道刷新网页时通常会保留滚动位置吗?

好吧,jQuery Waypoints偏移功能似乎使用此页面位置为0而不是页面的实际顶部。

例如,假设航点偏移为50,那么当页面刷新时,您当前处于1000的滚动位置。刷新的页面将自动跳回1000.在滚动位置达到1050之前,此航点不会激活。

是否可以保持相对于页面顶部的航点?因此,即使页面自动更新,滚动位置1000也会激活偏移量为50的航点。

$('.thing').waypoint(function(direction) {
    // do stuff
}, { offset: 50 })

更详细的代码:

(function($, window, document) {

    $(function() {

        var $popularArticles = $('.popular').find('article'),
        $latestArticles = $('.latest').find('article');

        var $latestPost = $latestArticles.filter(':first');
        var $latestPostDate = $latestPost.find('time').text();

        $latestPost.before('<h2>' + $latestPostDate + '</h2>');
        $popularArticles.filter(':first').before('<h2>Popular Now</h2>');

        // updates postdate in latest h2

        $latestArticles.waypoint(function(direction) {
            var $postDate = $(this).find('time').text();
            if (direction === 'down') {
                $latestH2.text($postDate);
            }
        }, { offset: 102 }).waypoint(function(direction) {
            var $postDate = $(this).find('time').text();
            if (direction === 'up') {
                $latestH2.text($postDate);
            }
        }, { offset: function() {
            return - $(this).height() / 2 + 50;
            }
        });

        // h2 waypoints

        var $latestH2 = $('.latest').filter(':first').find('h2'),
            $popularH2 = $('.popular').filter(':first').find('h2');

        $popularH2.add($latestH2).waypoint('sticky', { offset: 50 });

    });

}(window.jQuery, window, document));

1 个答案:

答案 0 :(得分:0)

认为浏览器在页面加载之前不会跳转到滚动位置,因此请在加载页面之前尝试运行路标代码,而不是在加载时运行。