Bootstrap滚动导航栏问题

Question

我正在努力的网站：zarwanhashem.com

你可以在这里找到我之前的问题（包括我的代码）： 引导一页网站themev格式化问题

选定的答案解决了我的问题，但由于使用-50进行jQuery调整，我还有另一个问题。 现在，导航栏错误地指示了我所在的页面。 即导航条应该使您当前所在的部分变暗。因此，如果您单击“关于”，它将带您进入about页面并使导航栏中的about链接变暗。 但是在您所在的页面之前的链接会突出显示，因为-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();
    });
});

Answer 2

这是一个解决这个问题的方法。 只需将scrolling-nav.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', function(){
        $('ul.navbar-nav li, ul.dropdown-menu li').removeClass('active');
        $($anchor).parent('li').addClass('active');
    });
    event.preventDefault();
}); 
});