时间戳

首页 > 解决方案 > 如何阻止导航栏在html中滚动时缩小

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

问题描述

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

<!--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>

所以当我滚动时，导航栏缩小，onscroll JS函数。这使我的徽标被压缩，我在整个项目中搜索了该属性，但找不到它。这是我的网站链接供参考。

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

标签： javascriptjqueryhtmlcss

解决方案

通过查看您的源代码，您有一个使用滚动事件将类添加到标题的函数：

$(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');
            }
    }
});

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

推荐阅读