I am facing an issue with my Wordpress site where I want the header to hide when the user scrolls. Despite trying various codes, I have been unable to make it work.
The reason for wanting to hide the header is that on mobile devices, it causes scroll problems and hiding it results in normal scrolling behavior.
This is the JavaScript code I was using:
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").layerS...
While this solution works on desktop, it does not seem to work on mobile devices. How can I resolve this issue?
Could you provide any suggestions or feedback on what I might be doing wrong? Thank you, Alex