Почему смещение (). Top дает мне неточные позиции для экранов разных размеров? - PullRequest
Новая
       39

Почему смещение (). Top дает мне неточные позиции для экранов разных размеров?

0 голосов
/ 20 сентября 2018

Я создал боковое меню, элементы которого меняют цвет в зависимости от того, сколько я прокрутил содержимое.Это делается путем добавления и удаления соответствующих классов.

Код выглядит следующим образом: 

// 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');
        }
    });

}

Затем я вызываю функцию со списком идентификаторов и позиций следующим образом: 

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']);

Теоретически только этодолжно сработать.Однако это было не очень точно.Например, 2-й элемент меню все равно будет выделен там, где я уже прокрутил бы до 4-го элемента и т. Д. Итак, я позволил консоли сообщить мне фактическое положение этих элементов и обнаружил, что существуют довольно большие различия.Поэтому мне пришлось изменить их вручную, например, так, прежде чем сравнивать позиции и объем прокрутки: 

    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 всегда должно быть одинаковым?) И как я могу избежать этого?

...