垂直菜单的平滑滚动链接效果问题

时间:2019-02-24 23:50:03

标签: javascript html css bootstrap-4 smooth-scrolling

我正在尝试解决此模板上的问题: https://codepen.io/eksch/pen/xwdOeK

导航菜单上的突出显示效果仅在减小的浏览器高度上起作用,如果我将窗口调整为全屏(https://codepen.io/eksch/full/xwdOeK)的大小并向下滚动到第7部分,则导航菜单上的链接将不会突出显示。 (我正在从27 inac中查看)

enter image description here

在javascript中,我相信此功能控制链接突出显示:      $(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();

有没有一种方法可以更改代码以适应所有屏幕尺寸?我应该如何使该部分与引导交互?

我不熟悉前端开发,请寻求任何帮助!

1 个答案:

答案 0 :(得分:1)

修正您的if语句:

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