Question

我已经下载了一个导航栏，导航栏的代码如下：

<!--header start-->
<header id="masthead" class="header ttm-header-style-classic-overlay">
  <!-- ttm-header-wrap -->
  <div class="ttm-header-wrap">
    <!-- ttm-stickable-header-w -->
    <div id="ttm-stickable-header-w" class="ttm-stickable-header-w clearfix">
      <div id="site-header-menu" class="site-header-menu">
        <div class="site-header-menu-inner ttm-stickable-header">
          <div class="container">
            <!-- site-branding -->
            <div class="site-branding">
              <a class="home-link" href="index.html" title="Planwey" rel="home">
                                        <img id="logo-img" class="img-center" width="260" src="images\TEIA Logo.png" alt="logo-img">
                                    </a>
            </div>
            <!-- site-branding end -->
            <!-- header-icins -->

            <!--site-navigation -->
            <div id="site-navigation" class="site-navigation">
              <div class="ttm-menu-toggle">

              </div>
              <nav id="menu" class="menu">
                <ul class="dropdown">
                  <li class="active"><a style="font-size:25px;" href="index.html">Telangana Event Industry Association</a>

                  </li>
                  &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
                  <li>
                </ul>
              </nav>
            </div>
            <!-- site-navigation end-->
          </div>
        </div>

      </div>
    </div>
  </div>

因此，当我滚动时，导航栏会收缩，滚动 JS 功能。这使我的徽标压缩了，我费力地在整个项目中搜索该属性，但找不到。这是我的网站link供参考。

在滚动时如何停止缩小滚动并使我的导航栏相同？

Answer 1

通过查看源代码，您可以使用一个函数，该函数使用scroll事件将类添加到标头中：

$(window).scroll(function(){
    if ( matchMedia( 'only screen and (min-width: 1200px)' ).matches )
    {
        if ($(window).scrollTop() >= 1000 ) {
            $('.ttm-stickable-header').addClass('fixed-header');
            $('.ttm-stickable-header').addClass('visible-title');
        }
        else {

            $('.ttm-stickable-header').removeClass('fixed-header');
            $('ttm-stickable-header').removeClass('visible-title');
            }
    }
});

因此，如果您只删除那段代码，它应该可以工作。

如何阻止导航栏在html中滚动时缩小

1 个答案: