使jQuery路径点偏移相对

Making jQuery Waypoints Offset Relative

本文关键字:相对 jQuery 路径      更新时间:2023-09-26

你知道刷新网页时滚动条位置通常是如何保留的吗?

好吧,jQuery的路径点偏移特性似乎使用这个页面位置为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));

认为浏览器在页面加载之后才跳转到滚动位置,所以尝试在页面加载之前而不是加载时运行你的路点代码