javascript - Bootstrap 滚动导航栏问题

Question

我正在做的网站:zarwanhashem.com

您可以在这里找到我之前的问题(包括我的代码):Bootstrap one page website themev formatting problems

选定的答案解决了我的问题，但由于使用 -50 进行的 jQuery 调整，我还有另一个问题。现在导航栏错误地指示了我所在的页面。即导航栏应该使您当前所在的部分变暗。因此，如果您单击“关于”，它将带您到“关于”页面并使导航栏中的“关于”链接变暗。但是您所在页面之前的链接被突出显示，因为 -50 使导航栏认为它在上一节中。您可以轻松地尝试这个来了解我的意思。

我该如何解决这个问题？谢谢。我没有将它添加到我的旧问题中的原因是因为那个人不再看它了。

另外，请让您的解释简单一些/对我来说有点愚蠢。我知道非常基本的 HTML 和 CSS，但我不懂任何 Javascript。

滚动 js:

//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
    if ($(".navbar").offset().top > 50) {
        $(".navbar-fixed-top").addClass("top-nav-collapse");
    } else {
        $(".navbar-fixed-top").removeClass("top-nav-collapse");
    }
});

//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top -50
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});

按照上一个问题中发帖人的建议，在文档末尾添加了 js:

$(window).ready(function(){
    $('div[class^="content-section"]').css('min-height', $(window).height());
    })

Answer 1

您以某种方式将 .active 类放在了错误的元素上。您需要将 .active 类放在单击的元素上。您应该使用 js 处理事件状态。这是我基于您的 HTML 结构的解决方案，但我确信还有不同的解决方案。

$(document).on('click', '.page-scroll', function(event) {
   var clicked = event.target; //get the clicked element
   if($(clicked).closest('ul').hasClass('dropdown-menu')){ //check if clicked element is inside dropdown
      $(clicked).closest('ul').parent().siblings().removeClass('active'); //remove active class from all
      $(clicked).closest('ul').parent().addClass('active'); add active class on clicked element parent - in your case <li> tag.
   }else{
      $(clicked).parent().siblings().removeClass('active');
      $(clicked).parent().addClass('active');
   }
}

让我知道这是否适合您。

发布代码后进行编辑

尝试用这个替换你的函数:

$(function() {
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top -50
        }, 1500, 'easeInOutExpo');

        if($($anchor).closest('ul').hasClass('dropdown-menu')){
           $($anchor).closest('ul').parent().siblings().removeClass('active'); 
           $($anchor).closest('ul').parent().addClass('active'); 
        }else{
           $($anchor).parent().siblings().removeClass('active');
           $($anchor).parent().addClass('active');
        }
        event.preventDefault();
    });
});