jquery - Sticky Header 缩小 jQuery 和 CSS 技巧

Question

首先，我是 css、html 和 js 的新手(你可以只看我的代码就明白 xD)但是，我想像许多付费 wordpress 插件一样获得花哨的东西。所以我使用了几个带有奇怪参数排列框的插件(这改变了我仍然不明白的内联代码)。没有人完全帮助我。我决定努力用代码来制作这个东西。

这是我的代码:

$(window).scroll(function() {
  if ($(document).scrollTop() > 50) {
    $('#site-header').addClass('shrink');
    $('#site-logo').addClass('shrink');
    $('#site-navigation-wrap').addClass('shrink');
    $('#oceanwp-mobile-menu-icon').addClass('shrink');
  } else {
    $('#site-header').removeClass('shrink');
    $('#site-logo').removeClass('shrink');
    $('#site-navigation-wrap').removeClass('shrink');
    $('#oceanwp-mobile-menu-icon').removeClass('shrink');
  }
});

#site-header {
  float: left;
  width: 100%;
  position: fixed;
  background-color: transparent;
}

#site-header.shrink {
  background-color: #333;
  position: fixed;
  opacity: .90;
  height: 50px;
}

#site-logo.clr.shrink {
  height: 75px;
  width: 75px;
  margin-top: -25px;
}

#site-navigation-wrap.shrink {
  margin-top: -20px;
}

#site-header.shrink,
#site-header,
#site-logo.clr,
#site-logo.clr.shrink,
#site-navigation-wrap,
#site-navigation-wrap.shrink {
  transition: .3s all ease-in-out;
  -moz-transition: .3s all ease-in-out;
  -webkit-transition: .3s all ease-in-out;
  -o-transition: .3s all ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="site-header" class="transparent-header effect-two clr sticky-element-original sticky-element-active element-is-not-sticky" data-height="100" itemscope="itemscope" itemtype="http://schema.org/WPHeader" style="">



  <div id="site-header-inner" class="clr container">



    <div id="site-logo" class="clr" itemscope="" itemtype="http://schema.org/Brand">

      htt
      <div id="site-logo-inner" class="clr">

        <a href="https://kutujoy.com/" class="custom-logo-link" rel="home" itemprop="url"><img width="93" height="37" src="https://kutujoy.com/wp-content/uploads/2018/02/cropped-KutuJoyLogo_93x37.png" class="custom-logo" alt="My Blog" itemprop="logo" srcset="https://kutujoy.com/wp-content/uploads/2018/02/cropped-KutuJoyLogo_93x37.png 1x, https://kutujoy.com/wp-content/uploads/2016/10/retina-logo.png 2x"></a>
      </div>
      <!-- #site-logo-inner -->



    </div>
    <!-- #site-logo -->



    <div id="site-navigation-wrap" class="clr">



      <nav id="site-navigation" class="navigation main-navigation clr" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">

        <ul id="menu-main-menu" class="main-menu dropdown-menu sf-menu sf-js-enabled" style="touch-action: pan-y;">
          <li id="menu-item-243" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-238 current_page_item menu-item-243"><a href="https://kutujoy.com/" class="menu-link"><span class="text-wrap">Home</span></a></li>
          <li id="menu-item-244" class="local-scroll menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-244"><a href="https://kutujoy.com/#kutular" class="menu-link"><span class="text-wrap">Kutular</span></a></li>
          <li id="menu-item-245" class="local-scroll menu-item menu-item-type-custom menu-item-object-custom menu-item-245"><a href="https://kutujoy.com/#goal" class="menu-link"><span class="text-wrap">Achieve your goal</span></a></li>
          <li id="menu-item-246" class="local-scroll menu-item menu-item-type-custom menu-item-object-custom menu-item-246"><a href="https://kutujoy.com/#pack" class="menu-link"><span class="text-wrap">Choose your pack</span></a></li>
          <li id="menu-item-247" class="local-scroll menu-item menu-item-type-custom menu-item-object-custom menu-item-247"><a href="https://kutujoy.com/#pricing" class="menu-link"><span class="text-wrap">Pricing</span></a></li>
          <li id="menu-item-256" class="local-scroll menu-item menu-item-type-custom menu-item-object-custom menu-item-256"><a href="https://kutujoy.com/#contact" class="menu-link"><span class="text-wrap">Contact Me</span></a></li>
          <li id="menu-item-250" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-250"><a href="https://kutujoy.com/?page_id=149" class="menu-link"><span class="text-wrap">Blog</span></a></li>
        </ul>
      </nav>
      <!-- #site-navigation -->



    </div>
    <!-- #site-navigation-wrap -->




    <div id="oceanwp-mobile-menu-icon" class="clr">




      <a href="#" class="mobile-menu">
        <i class="fa fa-bars"></i>
        <span class="oceanwp-text">Menu</span>

      </a>



    </div>
    <!-- #oceanwp-mobile-menu-navbar -->


  </div>
  <!-- #site-header-inner -->





</header>

我认为您无法通过运行此代码段来可视化任何内容，但如果您输入:https://kutujoy.com当你向下滚动时你明白我的意思。

所以我想要的显然是这个网站的菜单:https://coach.oceanwp.org/

我得到了类似的结果，但当我更改屏幕尺寸时它也没有响应(尤其是 Logo float 在 50 像素标题栏下)。

如有任何帮助，我们将不胜感激，在此先致谢。

Answer 1

我可以看到 jquery 和 css。但是没有 html 可以处理。你需要添加一个最小的、完整的和可验证的示例，以便我们可以为您提供帮助。– Gerardo BLANCO

这是我的 html 代码:

<header id="site-header" class="transparent-header effect-two clr sticky-element-original sticky-element-active element-is-not-sticky" data-height="100" itemscope="itemscope" itemtype="http://schema.org/WPHeader" style="">
<div id="site-header-inner" class="clr container">
    <div id="site-logo" class="clr" itemscope="" itemtype="http://schema.org/Brand">
        htt
        <div id="site-logo-inner" class="clr">
            <a href="https://kutujoy.com/" class="custom-logo-link" rel="home" itemprop="url"><img width="93" height="37" src="https://kutujoy.com/wp-content/uploads/2018/02/cropped-KutuJoyLogo_93x37.png" class="custom-logo" alt="My Blog" itemprop="logo" srcset="https://kutujoy.com/wp-content/uploads/2018/02/cropped-KutuJoyLogo_93x37.png 1x, https://kutujoy.com/wp-content/uploads/2016/10/retina-logo.png 2x"></a>
        </div><!-- #site-logo-inner -->
    </div><!-- #site-logo -->
    <div id="site-navigation-wrap" class="clr">
        <nav id="site-navigation" class="navigation main-navigation clr" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">
            <ul id="menu-main-menu" class="main-menu dropdown-menu sf-menu sf-js-enabled" style="touch-action: pan-y;"><li id="menu-item-243" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-238 current_page_item menu-item-243"><a href="https://kutujoy.com/" class="menu-link"><span class="text-wrap">Home</span></a></li><li id="menu-item-244" class="local-scroll menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-244"><a href="https://kutujoy.com/#kutular" class="menu-link"><span class="text-wrap">Kutular</span></a></li><li id="menu-item-245" class="local-scroll menu-item menu-item-type-custom menu-item-object-custom menu-item-245"><a href="https://kutujoy.com/#goal" class="menu-link"><span class="text-wrap">Achieve your goal</span></a></li><li id="menu-item-246" class="local-scroll menu-item menu-item-type-custom menu-item-object-custom menu-item-246"><a href="https://kutujoy.com/#pack" class="menu-link"><span class="text-wrap">Choose your pack</span></a></li><li id="menu-item-247" class="local-scroll menu-item menu-item-type-custom menu-item-object-custom menu-item-247"><a href="https://kutujoy.com/#pricing" class="menu-link"><span class="text-wrap">Pricing</span></a></li><li id="menu-item-256" class="local-scroll menu-item menu-item-type-custom menu-item-object-custom menu-item-256"><a href="https://kutujoy.com/#contact" class="menu-link"><span class="text-wrap">Contact Me</span></a></li><li id="menu-item-250" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-250"><a href="https://kutujoy.com/?page_id=149" class="menu-link"><span class="text-wrap">Blog</span></a></li></ul>
        </nav><!-- #site-navigation -->
    </div><!-- #site-navigation-wrap -->
    <div id="oceanwp-mobile-menu-icon" class="clr">
        <a href="#" class="mobile-menu">
            <i class="fa fa-bars"></i>
            <span class="oceanwp-text">Menu</span>
        </a>
    </div><!-- #oceanwp-mobile-menu-navbar -->
</div><!-- #site-header-inner -->
</header>