如何在浏览器调整大小时刷新导航滚动点,而无需浏览器刷新?

时间:2014-09-30 05:48:25

标签: javascript jquery css

(这是我的第一个问题,如果需要更多信息,请告诉我)

我有一个使用滚动点导航的页面,与此stack overflow answer中提供的解决方案相同。

当浏览器在example fiddle中调整大小时,活动点不再与其对应的div同步。

我的问题:有没有办法'刷新'这个位置& parPosition变量没有使用jquery刷新浏览器调整大小?下面的代码来自属于用户L105的引用小提琴。

    $(document).ready(function($){
    var parPosition = [];
    $('.par').each(function() {
        parPosition.push($(this).offset().top);
    });

    $('a').click(function(){
        $('html, body').animate({
            scrollTop: $( $.attr(this, 'href') ).offset().top
        }, 500);
        return false;
    });

    $(document).on('scroll', function() {
        var position = $(document).scrollTop(),
            index;

        for (var i=0; i<parPosition.length; i++) {
            if (position <= parPosition[i]) {
                index = i;
                break;
            }
        }

        $('.navigation ul li a').removeClass('active');
        $('.navigation ul li a:eq('+index+')').addClass('active');
    });

        $('.navigation ul li a').click(function () {
        $('.navigation ul li a').removeClass('active');
            $(this).addClass('active');
    });   
});

(在浏览器调整大小时刷新会产生另一个问题,即在滚动时从css prop'inline-block'切换到'none'的文本会因page / scrollTop刷新而重新出现)

显然,我是初学者,我很乐意'坚持这一点',但经过几天的努力,我决定寻求一些帮助。理想情况下,我想对现有解决方案发表评论,但我需要50多名代表。

0 个答案:

没有答案