滚动移动设备上无法隐藏固定标头？

Question

我有这个wordpress网站，我试图在用户滚动时隐藏标题。我尝试了不同的代码，但似乎无法使其正常工作。

我试图这样做的原因是因为在移动设备上，标题会导致滚动问题，如果我隐藏标题，则滚动是正常的。

这是我正在使用的JS：

jQuery(function($) {
  $(window).scroll(function () { 
    if ($(this).scrollTop() > 100) {
      $('#topContainer').hide();
    } else {
      $('#topContainer').show();
    }
  });
});

<section id="topContainer" class="homeTopContainer" style="position: fixed;">
		<div id="navigationWrap">
			<div class="row">
				<div class="three-col"><a href=" http://lendenapp.com/ "><img src="http://lendenapp.com/wp-content/uploads/2014/11/login_logo.png" alt="Delicious Mint"></a></div>
				<div class="nine-col last-col menuWrap">
					<ul id="menu-menu-1" class="mainMenu"><li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-26 current_page_item menu-item-135"><a href="http://lendenapp.com/">Home</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-100"><a href="http://lendenapp.com/#about">How it works</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-101"><a href="http://lendenapp.com/#features">Features</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-103"><a href="http://lendenapp.com/#screens">Screens</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-133"><a href="http://lendenapp.com/#getapp">Download</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-134"><a href="http://lendenapp.com/#contact">Contact</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-136"><a href="http://lendenapp.com/blog/">Blog</a></li>
</ul>					<div class="clear"></div>
				</div>
				<div class="clear"></div>
	   		</div>
   		</div>

   		<div class="row">
   			 <script type="text/javascript">var lsjQuery = jQuery;</script><script type="text/javascript"> lsjQuery(document).ready(function() { if(typeof lsjQuery.fn.layerSlider == "undefined") { lsShowNotice('layerslider_1','jquery'); } else { lsjQuery("#layerslider_1").layerSlider({navPrevNext: false, navStartStop: false, thumbnailNavigation: 'disabled', skinsPath: 'http://lendenapp.com/wp-content/plugins/LayerSlider/static/skins/'}) } }); </script><div id="layerslider_1" class="ls-wp-container ls-container ls-v5" style="width: 860px; height: 507.179487179487px; max-width: 1170px; margin: 0px auto; visibility: visible;"><div class="ls-inner" style="width: 860px; height: 507px; background-color: transparent;"><div class="ls-lt-container ls-overflow-hidden" style="width: 860px; height: 507px; display: block;"></div><div class="ls-slide" data-ls="slidedelay:7000; transition2d: all;" style="width: 0px; height: 690px; visibility: visible; display: none; left: 0px; right: auto; top: 0px; bottom: auto;"><div class="ls-gpuhack" style="width: auto; height: auto; padding: 0px; border-width: 0px; left: 0px; top: 0px;"></div><img class="ls-l ls-preloaded" style="top: 4px; left: -7px; white-space: nowrap; width: 530px; height: 680px; padding: 0px; border-width: 0px; visibility: hidden; margin-left: 0px; margin-top: 0px; transform-origin: 50% 50% 0px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.002, 0, 0, 0, 1); opacity: 1; filter: none;" data-ls="offsetxin:0;offsetyin:100;durationin:2000;offsetxout:0;" src="http://lendenapp.com/wp-content/uploads/2015/01/iphone_hand_slider1.png" data-src="http://lendenapp.com/wp-content/uploads/2015/01/iphone_hand_slider1.png" alt=""><p class="ls-l sliderText" style="top: 73px; left: 631px; line-height: 65px; white-space: nowrap; width: auto; height: auto; font-size: 70px; padding: 0px; border-width: 0px; visibility: hidden; margin-left: 0px; margin-top: 0px; transform-origin: 50% 50% 0px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.002, 0, 0, 0, 1); opacity: 1; filter: none;" data-ls="offsetxin:0;offsetyin:50;durationin:2000;offsetxout:0;"><span>LenDen</span> <br><span style="font-size:40px; line-height:30px">Your neighbourhood<br> marketplace</span></p><a href="https://play.google.com/store/apps/details?id=vee.HexWhale.LenDen" target="_blank" class="ls-l" style="top: 304px; left: 620px; display: block; visibility: hidden; margin-left: 0px; margin-top: 0px; transform-origin: 50% 50% 0px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.002, -80, 0, 0, 1); opacity: 1; filter: none;"><p class="buttonSlider1 ls-preloaded" style="padding: 0px; font-size: 18px; line-height: 18px; white-space: nowrap; width: auto; height: auto; border-width: 0px;"><span class="dlButton" id="AndroidButton" style="font-size:14px;padding=15px 30px;"><i class="fa fa-android"></i>Download for <br><span style="font-size:24px;">Android</span></span></p></a><a href="https://itunes.apple.com/us/app/lenden/id896445510?mt=8" target="_blank" class="ls-l" style="top: 301px; left: 828px; display: block; visibility: hidden; margin-left: 0px; margin-top: 0px; transform-origin: 50% 50% 0px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.002, -80, 0, 0, 1); opacity: 1; filter: none;"><p class="buttonSlider1 ls-preloaded" style="padding: 0px; font-size: 18px; line-height: 18px; white-space: nowrap; width: auto; height: auto; border-width: 0px;"><span class="dlButton" style="font-size:14px;padding=15px 30px;"><i class="fa fa-apple"></i>Download for <br><span style="font-size:24px;">Apple IOS</span></span> </p></a></div><div class="ls-slide" data-ls="slidedelay:7000; transition2d: all;" style="width: 0px; height: 690px; visibility: visible; display: none; left: 0px; right: auto; top: 0px; bottom: auto;"><div class="ls-gpuhack" style="width: auto; height: auto; padding: 0px; border-width: 0px; left: 0px; top: 0px;"></div><img class="ls-l ls-preloaded" style="top: 4px; left: -7px; white-space: nowrap; width: 600px; height: 600px; padding: 0px; border-width: 0px; margin-left: 0px; margin-top: 0px; transform-origin: 50% 50% 0px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.002, 0, 0, 0, 1); opacity: 1; visibility: hidden; filter: none;" data-ls="offsetxin:0;offsetyin:100;durationin:2000;offsetxout:0;" src="http://lendenapp.com/wp-content/uploads/2015/01/note31.png" data-src="http://lendenapp.com/wp-content/uploads/2015/01/note31.png" alt=""><p class="ls-l sliderText" style="top: 73px; left: 631px; line-height: 65px; white-space: nowrap; width: auto; height: auto; font-size: 70px; padding: 0px; border-width: 0px; margin-left: 0px; margin-top: 0px; transform-origin: 50% 50% 0px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.002, 0, 0, 0, 1); opacity: 1; visibility: hidden; filter: none;" data-ls="offsetxin:0;offsetyin:50;durationin:2000;offsetxout:0;"><span>LenDen</span> <br><span style="font-size:40px; line-height:30px">Exchange/Donate/Sell<br> in a few clicks</span></p><a href="https://play.google.com/store/apps/details?id=vee.HexWhale.LenDen" target="_blank" class="ls-l" style="top: 301px; left: 620px; display: block; margin-left: 0px; margin-top: 0px; transform-origin: 50% 50% 0px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.002, 0, 0, 0, 1); opacity: 1; visibility: hidden; filter: none;" data-ls="offsetxin:0;offsetyin:100;durationin:2000;offsetxout:0;"><p style="padding: 0px; font-size: 18px; line-height: 18px; white-space: nowrap; width: auto; height: auto; border-width: 0px;" class="ls-preloaded"><span class="dlButton" style="font-size:14px;padding=15px 30px;"><i class="fa fa-android"></i>Download for <br><span style="font-size:24px;">Android</span></span></p></a><a href="https://itunes.apple.com/us/app/lenden/id896445510?mt=8" target="_blank" class="ls-l" style="top: 301px; left: 828px; display: block; margin-left: 0px; margin-top: 0px; transform-origin: 50% 50% 0px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.002, 0, 0, 0, 1); opacity: 1; visibility: hidden; filter: none;" data-ls="offsetxin:0;offsetyin:100;durationin:2000;offsetxout:0;"><p style="padding: 0px; font-size: 18px; line-height: 18px; white-space: nowrap; width: auto; height: auto; border-width: 0px;" class="ls-preloaded"><span class="dlButton" style="font-size:14px;padding=15px 30px;"><i class="fa fa-apple"></i>Download for <br><span style="font-size:24px;">Apple IOS</span></span> </p></a></div><div class="ls-slide" data-ls="slidedelay:7000; transition2d: all;" style="width: 0px; height: 690px; visibility: visible; display: none; left: 0px; right: auto; top: 0px; bottom: auto;"><div class="ls-gpuhack" style="width: auto; height: auto; padding: 0px; border-width: 0px; left: 0px; top: 0px;"></div><img class="ls-l ls-preloaded" style="top: 3px; left: -8px; white-space: nowrap; width: 650px; height: 620px; padding: 0px; border-width: 0px; margin-left: 0px; margin-top: 0px; transform-origin: 50% 50% 0px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.002, 0, 0, 0, 1); opacity: 1; visibility: hidden; filter: none;" data-ls="offsetxin:0;offsetyin:100;durationin:2000;offsetxout:0;" src="http://lendenapp.com/wp-content/uploads/2015/01/apple_ipad_3_psd_by_zlypkorp-d54ha122.png" data-src="http://lendenapp.com/wp-content/uploads/2015/01/apple_ipad_3_psd_by_zlypkorp-d54ha122.png" alt=""><p class="ls-l sliderText" style="top: 73px; left: 631px; white-space: nowrap; width: auto; height: auto; font-size: 70px; padding: 0px; border-width: 0px; margin-left: 0px; margin-top: 0px; transform-origin: 50% 50% 0px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.002, 0, 0, 0, 1); opacity: 1; visibility: hidden; filter: none;" data-ls="offsetxin:0;offsetyin:50;durationin:2000;offsetxout:0;"><span>Awesome</span><br>features inside!</p><a href="https://play.google.com/store/apps/details?id=vee.HexWhale.LenDen" target="_blank" class="ls-l" style="top: 301px; left: 620px; display: block; margin-left: 0px; margin-top: 0px; transform-origin: 50% 50% 0px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.002, 0, 0, 0, 1); opacity: 1; visibility: hidden; filter: none;" data-ls="offsetxin:0;offsetyin:100;durationin:2000;offsetxout:0;"><p style="padding: 0px; font-size: 18px; line-height: 18px; white-space: nowrap; width: auto; height: auto; border-width: 0px;" class="ls-preloaded"><span class="dlButton" style="font-size:14px;padding=15px 30px;"><i class="fa fa-android"></i>Download for <br><span style="font-size:24px;">Android</span></span></p></a><a href="https://itunes.apple.com/us/app/lenden/id896445510?mt=8" target="_blank" class="ls-l" style="top: 301px; left: 828px; display: block; margin-left: 0px; margin-top: 0px; transform-origin: 50% 50% 0px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.002, 0, 0, 0, 1); opacity: 1; visibility: hidden; filter: none;" data-ls="offsetxin:0;offsetyin:100;durationin:2000;offsetxout:0;"><p style="padding: 0px; font-size: 18px; line-height: 18px; white-space: nowrap; width: auto; height: auto; border-width: 0px;" class="ls-preloaded"><span class="dlButton" style="font-size:14px;padding=15px 30px;"><i class="fa fa-apple"></i>Download for <br><span style="font-size:24px;">Apple IOS</span></span></p></a></div><div class="ls-slide ls-active" data-ls="slidedelay:7000; transition2d: all;" style="width: 860px; height: 507px; left: auto; right: 0px; top: 0px; bottom: auto; visibility: visible; display: none;"><div class="ls-gpuhack" style="width: auto; height: auto; padding: 0px; border-width: 0px; left: 0px; top: 0px;"></div><img class="ls-l ls-preloaded" style="top: 2.20512820512821px; left: -5.88034188034188px; white-space: nowrap; filter: none; width: 477.777777777778px; height: 455.726495726496px; padding: 0px; border-width: 0px; margin-left: 0px; margin-top: 0px; transform-origin: 50% 50% 0px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.002, 0, 0, 0, 1); opacity: 1; visibility: visible;" data-ls="offsetxin:0;offsetyin:100;durationin:2000;offsetxout:0;" src="http://lendenapp.com/wp-content/uploads/2015/01/iphone_slider_4.png" data-src="http://lendenapp.com/wp-content/uploads/2015/01/iphone_slider_4.png" alt=""><p class="ls-l sliderText" style="top: 53.6581196581197px; left: 463.811965811966px; white-space: nowrap; filter: none; width: auto; height: auto; font-size: 51.4529914529915px; padding: 0px; border-width: 0px; margin-left: 0px; margin-top: 0px; transform-origin: 50% 50% 0px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.002, 0, 0, 0, 1); opacity: 1; visibility: visible;" data-ls="offsetxin:0;offsetyin:50;durationin:2000;offsetxout:0;"><span>Send a message</span><br>and deal !!!</p><a href="https://play.google.com/store/apps/details?id=vee.HexWhale.LenDen" target="_blank" class="ls-l" style="top: 221.247863247863px; left: 455.726495726496px; filter: none; display: block; margin-left: 0px; margin-top: 0px; transform-origin: 50% 50% 0px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.002, 0, 0, 0, 1); opacity: 1; visibility: visible;" data-ls="offsetxin:0;offsetyin:100;durationin:2000;offsetxout:0;"><p style="padding: 0px; font-size: 13.2307692307692px; line-height: 13.2307692307692px; white-space: nowrap; width: auto; height: auto; border-width: 0px;" class="ls-preloaded"><span class="dlButton" style="font-size:14px;padding=15px 30px;"><i class="fa fa-android"></i>Download for <br><span style="font-size:24px;">Android</span></span></p></a><a href="https://itunes.apple.com/us/app/lenden/id896445510?mt=8" target="_blank" class="ls-l" style="top: 221.247863247863px; left: 608.615384615385px; filter: none; display: block; margin-left: 0px; margin-top: 0px; transform-origin: 50% 50% 0px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.002, 0, 0, 0, 1); opacity: 1; visibility: visible;" data-ls="offsetxin:0;offsetyin:100;durationin:2000;offsetxout:0;"><p style="padding: 0px; font-size: 13.2307692307692px; line-height: 13.2307692307692px; white-space: nowrap; width: auto; height: auto; border-width: 0px;" class="ls-preloaded"><span class="dlButton" style="font-size:14px;padding=15px 30px;"><i class="fa fa-apple"></i>Download for <br><span style="font-size:24px;">Apple IOS</span></span></p></a></div><div class="ls-circle-timer" style="display: block;"><div class="ls-ct-left"><div class="ls-ct-rotate" style="transform: matrix(-0.98424, 0.17679, -0.17679, -0.98424, 0, 0);"><div class="ls-ct-hider"><div class="ls-ct-half"></div></div></div></div><div class="ls-ct-right"><div class="ls-ct-rotate" style="transform: matrix(-1, 0, 0, -1, 0, 0);"><div class="ls-ct-hider"><div class="ls-ct-half"></div></div></div></div><div class="ls-ct-center"></div></div></div><div class="ls-loading-container" style="z-index: -1; display: none;"><div class="ls-loading-indicator"></div></div><div class="ls-bottom-nav-wrapper" style="visibility: visible;"><span class="ls-nav-sides ls-nav-sideleft"></span><span class="ls-bottom-slidebuttons"><a href="#" class=""></a><a href="#" class=""></a><a href="#" class=""></a><a href="#" class="ls-nav-active"></a></span><span class="ls-nav-sides ls-nav-sideright"></span></div><div class="ls-shadow"></div></div>   		</div>
	</section>

这适用于桌面，但问题是我不在手机上？你有什么建议？

我做错了什么？ 谢谢 亚历

Answer 1

我有一个更好的解决方案，尝试在此规则中添加display none，它会像你期望的那样工作：

.fmshown {

display: none !important;

         }

.fmshown当高度达到一定值时，它是应用于标题div的类

这将是我测试它的技巧！

为了更好的特异性，您可以按照以下步骤进行：

body #followMenu .fmshown  {
    display: none !important;
}

111（HTML选择器，id选择器，类选择器; 1 + 100 + 10）