【发布时间】：2018-02-20 23:36:35
【问题描述】：
首先，我是 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>我认为您无法通过运行此 sn-p 来可视化任何内容，但如果您输入：https://kutujoy.com，当您向下滚动时，您就会明白我的意思。
所以我想要的显然是这个网站的菜单：https://coach.oceanwp.org/
我得到了类似的结果，但是当我更改屏幕尺寸时它没有响应（尤其是徽标浮动在 50 像素的标题栏下）。
任何帮助将不胜感激，在此先感谢。
【问题讨论】：
-
sn-p 中没有 HTML 代码。你的主要问题是什么
-
您应该将kutujoy.com 可视化，其#site-header 元素不能作为coach.oceanwp.org 网站工作。我想要的是安排 css 与这个网站完全合作
-
你能详细说明...吗？\
-
因此，当您输入coach.oceanwp.org 并向下滚动一点时，您会看到徽标、导航栏和标题在一些过渡时间内缩小，并且非常顺利。此外，这个标题和导航栏是完全响应的。但是，在我的网站中，我非常密切地使用上面一些边距样式等的代码进行了此操作。最后，在我的网站中无法获得完全相同的效果。如果有人知道如何正确编辑这个 CSS，我非常感激
-
我想我找到了来源网站的样式并应用于我的网站，但我也不知道如何可视化代码。我使用了 chrome 开发者工具，但找不到可靠的解决方案。任何专家都可以解决这个问题，但直到现在没有人帮助我
标签： jquery css menu responsive sticky