无法在滚动移动中隐藏固定标题?

萨维萨尔

我有这个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>

现在可以在台式机上使用,但问题是我不在移动设备上吗?你有什么建议?

我究竟做错了什么?谢谢亚历克斯

EE

我对此有一个更好的解决方案,请尝试不向此规则添加显示,并且它会像您期望的那样工作:

.fmshown {

display: none !important;

         }

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

这将是我测试的窍门!

为了获得更好的特异性,您可以执行以下操作:

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

111(HTML选择器,ID选择器,类选择器; 1 + 100 + 10)

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

向下滚动隐藏固定标题,向上滚动显示并悬停

来自分类Dev

表格可滚动时无法固定标题

来自分类Dev

滚动显示多个固定标题

来自分类Dev

滚动显示多个固定标题

来自分类Dev

滚动时更改固定标题

来自分类Dev

滚动内容时如何固定标题

来自分类Dev

固定标题隐藏内容顶部

来自分类Dev

如何使1个表可以固定标题滚动而不影响Bootstrap中的其他表

来自分类Dev

在机器人框架中向下滚动带有固定标题的表格

来自分类Dev

浮动在TH上方的DIV用于具有固定标题的滚动表,但我无法将标题居中

来自分类Dev

集线器控件中的固定标题

来自分类Dev

具有可滚动行和固定标题的表

来自分类Dev

滚动到固定标题的锚点位置

来自分类Dev

CSS:具有多个表头的固定标题的滚动表

来自分类Dev

具有固定标题的UWP垂直滚动条

来自分类Dev

具有固定标题的可滚动div内容区域

来自分类Dev

滚动过去的元素时更改固定标题的背景

来自分类Dev

滚动到固定标题顶部时延迟重新绘制

来自分类Dev

向下滚动页面后固定标题跳

来自分类Dev

滚动时的HTML固定标题栏

来自分类Dev

具有固定标题的水平和垂直滚动内容

来自分类Dev

滚动过去的元素时更改固定标题的背景

来自分类Dev

滚动时在元素上覆盖固定标题

来自分类Dev

CSS:具有多个表头的固定标题的滚动表

来自分类Dev

具有水平滚动内容的固定标题

来自分类Dev

滚动上方的Div时固定标题

来自分类Dev

滚动过去后如何固定标题

来自分类Dev

响应式表格滚动条与固定标题重叠

来自分类Dev

当文本焦点(键盘打开)时,固定标题隐藏(消失)