Question

我创建了一个侧边菜单，其内容根据我滚动内容的多少而改变颜色。它通过添加和删除相关的类来做到这一点。

代码如下：

// change classes on scroll:
// for 5 elements-long menu:
function dynamicSideMenu(sideMenu, positions, itms) {

    var sideMenu = $(sideMenu),
        itemsPos = positions,
        items = itms,
        link = sideMenu.find('a');

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

        if(scrolled >= itemsPos.item1 && scrolled < itemsPos.item2) {
            $('.video-menu-class ul li a').removeClass('video-menu-current');
            $('.video-menu-class ul li a:eq(0)').addClass('video-menu-current');
        } else if(scrolled >= itemsPos.item2 && scrolled < itemsPos.item3) {
            $('.video-menu-class ul li a').removeClass('video-menu-current');
            $('.video-menu-class ul li a:eq(1)').addClass('video-menu-current');
        } else if(scrolled >= itemsPos.item3 && scrolled < itemsPos.item4) {
            $('.video-menu-class ul li a').removeClass('video-menu-current');
            $('.video-menu-class ul li a:eq(2)').addClass('video-menu-current');
        } else if(scrolled >= itemsPos.item4 && scrolled < itemsPos.item5) {
            $('.video-menu-class ul li a').removeClass('video-menu-current');
            $('.video-menu-class ul li a:eq(3)').addClass('video-menu-current');
        } else if(scrolled >= itemsPos.item5 && scrolled < itemsPos.item6) {
            $('.video-menu-class ul li a').removeClass('video-menu-current');
            $('.video-menu-class ul li a:eq(4)').addClass('video-menu-current'); 
        } else if(scrolled >= itemsPos.item6) {
            $('.video-menu-class ul li a').removeClass('video-menu-current');
            $('.video-menu-class ul li a:eq(5)').addClass('video-menu-current'); 
        } else {
            $('.video-menu-class ul li a').removeClass('video-menu-current');
        }
    });

}

然后我使用ID和位置列表来调用函数，如下所示：

dynamicSideMenu('.video-menu-class', 
                    {item1: $('#najnovsie').offset().top,
                    item2: $('#recenzie').offset().top,
                    item3: $('#starostlivost').offset().top,
                    item4: $('#recepty').offset().top,
                    item5: $('#tipy').offset().top,
                    item6: $('#vychova').offset().top},
                    ['#najnovsie', '#recenzie', '#starostlivost', '#recepty', '#tipy', '#vychova']);

从理论上讲，仅此一项应该有效。但是，这不是很精确。例如，第二个菜单元素仍会高亮显示，我已经可以滚动到第四个元素，依此类推。因此，我让控制台告诉我这些元素的实际位置，发现它们之间存在很大差异。所以在比较位置和滚动了多少之前，我必须像这样手动修改它们：

    itemsPos.item2 = parseInt(itemsPos.item2, 0) - 362;
    itemsPos.item3 = parseInt(itemsPos.item3, 0) - 645;
    itemsPos.item4 = parseInt(itemsPos.item4, 0) - 910;
    itemsPos.item5 = parseInt(itemsPos.item5, 0) - 1060;
    itemsPos.item6 = parseInt(itemsPos.item6, 0) - 1300;

现在，这可以完美地在我的笔记本电脑上工作，但是当我在具有不同屏幕尺寸的另一台笔记本电脑上尝试使用时，它又一团糟，而且不够精确。为什么会发生这种情况（我认为 .offset（）。top 应该始终相同？），如何避免呢？

为什么offset（）。top给我不同屏幕尺寸的不正确位置？

0 个答案: