Эффект плавной прокрутки - PullRequest
Новая
       38

Эффект плавной прокрутки

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

Это дополнительный вопрос из моего предыдущего поста: Проблема с эффектом плавной прокрутки в вертикальном меню

Я пересматриваю шаблон https://codepen.io/eksch/pen/xwdOeK, чтобы соответствоватьсодержимое моего сайта.Длина моих разделов будет намного больше, чем дизайн шаблона.Исходя из javascript, эффект плавной прокрутки тесно связан с положением браузера и разделов div, так что: 

$(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 - $(this).height() <= scrollDistance) {
                    $('.navigation a.active').removeClass('active');
                    $('.navigation a').eq(i).addClass('active');
            }
    });
}).scroll();

Можно ли увеличить длину разделов до 100% или больше ивсе еще поддерживать эффект?(длина по умолчанию недостаточно велика для моего содержимого) Я попытался отрегулировать последний раздел div до 100%, эффект подсветки перестал работать, и после div есть пробел.

enter image description here

Пробел в конце:

enter image description here

Я довольно новичок в интерфейсе, и мне бы хотелосьза любые предложения или помощь по этому вопросу.Спасибо!

1 Ответ

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

Я играл с вашим CSS, и я думаю, что это то, что вы хотите. 

// in .page-section
height: 90%;
width: 64%;
margin-left: 30%;
margin-top: 4%;

// in .navigation
margin-left: 0%;
height: 100%;
top: 0;

вы можете проверить мой обновленный CodePen

Изменить

Для этого значение

работает, если длина секции требует прокрутки вниз

или до

допускается для содержимого, которое превышает высоту браузера

, просто измените height: 90%; на min-height: 90%; в .page-section

, проверьте CodePen выше для обновленного кода.

...