Проблема с эффектом плавной прокрутки в вертикальном меню - PullRequest
Новая
       61

Проблема с эффектом плавной прокрутки в вертикальном меню

0 голосов
/ 25 февраля 2019

Я пытаюсь решить проблему с этим шаблоном: https://codepen.io/eksch/pen/xwdOeK

Эффект подсветки в меню навигации работает только на уменьшенной высоте браузера, если я изменяю размер окна на полный экран (https://codepen.io/eksch/full/xwdOeK) и прокрутите вниз до раздела 7, ссылка в меню навигации не будет выделена. (Я смотрю с 27 в IMAC)

enter image description here

В javascripts я полагаю, что эта функция управляет подсветкой ссылки: $ (window) .scroll (function () {var scrollDistance = $ (window) .scrollTop (); 

    // Show/hide menu on scroll
    //if (scrollDistance >= 850) {
    //      $('nav').fadeIn("fast");
    //} else {
    //      $('nav').fadeOut("fast");
    //}

    // Assign active class to nav links while scolling
    $('.page-section').each(function(i) {
            if ($(this).position().top <= scrollDistance) {
                    $('.navigation a.active').removeClass('active');
                    $('.navigation a').eq(i).addClass('active');
            }
    });
}).scroll();

Isесть ли способ изменить код, чтобы он адаптировался к разным размерам экрана? И как мне сделать раздел интерактивным с помощью начальной загрузки?

Я еще новичок в области фронт-энда разработки, ценю любую помощь!

1 Ответ

0 голосов
/ 25 февраля 2019

Исправьте утверждение if: 

if ($(this).position().top - $(this).height() <= scrollDistance)
...