摄影网站导航栏子菜单实现及滚动冲突问题咨询

我来帮你搞定这两个导航需求，结合你现有的Bootstrap导航栏和平滑滚动代码，一步步拆解实现方法，还能解决你之前加scroll类导致下拉菜单显示异常的问题：

方案A：下拉菜单+分步平滑滚动（先到Gallery区块，再到子分类） #

1. 调整导航栏HTML结构（用Bootstrap原生Dropdown组件） #

把Gallery的<li>改成标准的Bootstrap下拉菜单结构，避免样式冲突：

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#gallery" role="button" data-toggle="dropdown" aria-expanded="false">
    Gallery
  </a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item scroll-sub" href="#gallery-family">Family</a></li>
    <li><a class="dropdown-item scroll-sub" href="#gallery-weddings">Weddings</a></li>
    <li><a class="dropdown-item scroll-sub" href="#gallery-friends">Friends</a></li>
  </ul>
</li>

这里给子项单独加了scroll-sub类，和主导航的scroll类区分开，就能解决你之前加scroll类导致下拉菜单无法正常显示的问题——因为原来的scroll点击事件会阻止Bootstrap下拉菜单的默认展开行为。

2. 修改平滑滚动JavaScript代码 #

在原有逻辑基础上，添加子项的分步滚动逻辑：

$(document).ready(function() {
  var scrollLink = $('.scroll');
  var scrollSubLink = $('.scroll-sub'); // 子分类链接

  // 主导航平滑滚动（保留原有逻辑）
  scrollLink.click(function(e) {
    e.preventDefault();
    $('body,html').animate({
      scrollTop: $(this.hash).offset().top - 60
    }, 750 );
  });

  // 子分类分步滚动：先到Gallery，再到目标子区块
  scrollSubLink.click(function(e) {
    e.preventDefault();
    var targetSub = $(this.hash);
    var gallerySection = $('#gallery');

    // 第一步：滚动到Gallery区块
    $('body,html').animate({
      scrollTop: gallerySection.offset().top - 60
    }, 750, function() {
      // 第二步：延迟100ms后滚动到子分类（视觉过渡更流畅）
      setTimeout(function() {
        $('body,html').animate({
          scrollTop: targetSub.offset().top - 60
        }, 750 );
      }, 100);
    });
  });

  // 导航激活状态切换（兼容子分类）
  $(window).scroll(function() {
    var scrollbarLocation = $(this).scrollTop();

    // 处理主导航激活状态
    scrollLink.each(function() {
      var sectionOffset = $(this.hash).offset().top;
      if (sectionOffset -75 <= scrollbarLocation ) {
        $(this).parent().addClass('active');
        $(this).parent().siblings().removeClass('active');
      }
    });

    // 可选：处理子分类激活状态
    scrollSubLink.each(function() {
      var subSectionOffset = $(this.hash).offset().top;
      if (subSectionOffset -75 <= scrollbarLocation ) {
        $(this).parent().addClass('active');
        $(this).parent().siblings().removeClass('active');
        $('.dropdown-toggle').parent().addClass('active'); // 同时激活父级Gallery导航
      }
    });
  });
});

3. 可选：激活子项样式 #

给选中的子下拉项添加高亮样式：

.dropdown-menu .active > a {
  background-color: #your-active-color; /* 替换成你导航的激活色 */
  color: #fff;
}

方案B：点击Gallery后右侧显示子导航项 #

1. 调整导航栏HTML结构 #

在Gallery的<li>内部添加隐藏的子导航容器：

<li class="nav-item gallery-parent">
  <a class="nav-link scroll gallery-trigger" href="#gallery">Gallery</a>
  <!-- 子导航容器，默认隐藏 -->
  <ul class="nav navbar-nav gallery-submenu hidden">
    <li class="nav-item"><a class="nav-link scroll" href="#gallery-family">Family</a></li>
    <li class="nav-item"><a class="nav-link scroll" href="#gallery-weddings">Weddings</a></li>
    <li class="nav-item"><a class="nav-link scroll" href="#gallery-friends">Friends</a></li>
  </ul>
</li>

2. 添加CSS控制子菜单位置 #

让子菜单显示在Gallery导航的右侧：

.gallery-parent {
  position: relative; /* 作为子菜单的定位父级 */
}

.gallery-submenu {
  position: absolute;
  top: 0;
  left: 100%; /* 固定在Gallery右侧 */
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 0;
  min-width: 160px;
  margin-top: 5px;
}

.gallery-submenu.hidden {
  display: none;
}

.gallery-submenu li {
  padding: 0 15px;
}

.gallery-submenu li:hover {
  background-color: #f8f9fa; /* 鼠标悬停高亮 */
}

3. 修改JavaScript代码，添加显示/隐藏逻辑 #

在原有代码基础上，增加子菜单的交互逻辑：

$(document).ready(function() {
  var scrollLink = $('.scroll');
  var galleryTrigger = $('.gallery-trigger');
  var gallerySubmenu = $('.gallery-submenu');

  // 主导航平滑滚动（保留原有逻辑）
  scrollLink.click(function(e) {
    e.preventDefault();
    $('body,html').animate({
      scrollTop: $(this.hash).offset().top - 60
    }, 750 );
    // 点击子项后自动隐藏子菜单
    gallerySubmenu.addClass('hidden');
  });

  // 点击Gallery切换子菜单显示/隐藏
  galleryTrigger.click(function(e) {
    e.preventDefault();
    if (gallerySubmenu.hasClass('hidden')) {
      gallerySubmenu.removeClass('hidden');
    } else {
      // 如果子菜单已显示，点击就滚动到Gallery区块
      $('body,html').animate({
        scrollTop: $('#gallery').offset().top - 60
      }, 750 );
      gallerySubmenu.addClass('hidden');
    }
  });

  // 点击页面其他区域自动隐藏子菜单
  $(document).click(function(e) {
    if (!$(e.target).closest('.gallery-parent').length) {
      gallerySubmenu.addClass('hidden');
    }
  });

  // 导航激活状态切换（保留原有逻辑，如需子项激活可参考方案A调整）
  $(window).scroll(function() {
    var scrollbarLocation = $(this).scrollTop();
    scrollLink.each(function() {
      var sectionOffset = $(this.hash).offset().top ;
      if ( sectionOffset -75 <= scrollbarLocation ) {
        $(this).parent().addClass('active');
        $(this).parent().siblings().removeClass('active');
      }
    });
  });
});

注意事项 #

• 确保你的页面已经引入了Bootstrap的CSS和JS文件，否则导航组件的默认样式和交互会失效。
• 页面中必须存在子分类对应的区块（比如#gallery-family、#gallery-weddings），否则滚动逻辑无法生效。
• 如果之前的下拉菜单显示异常，核心原因是scroll类的点击事件阻止了Bootstrap下拉菜单的默认展开行为，用单独的类（比如方案A的scroll-sub）就能避免这个冲突。

内容的提问来源于stack exchange，提问作者Jared Teller