I am facing an issue with my menu, which is a normal block-displayed div. There is another div with annotation above it. I want the menu to stick to the top as fixed when scrolling down, but immediately hide itself. The goal is for the menu to appear when the user stops scrolling, disappear when the user scrolls up, reappear when they stop again, and continue this pattern - always appearing when there is no scrolling activity.
Can anyone provide assistance with this?
Below is the code for my menu:
<div class="menu">
<div class="menu_tab">
<div class="wrapper">
<div class="obsah">
<div class="kolonky" id="strana">
<a href="./"><div class="logo"></div></a>
</div>
<div class="kolonky" id="stred">
<div class="rozbalit"><a href="obchod.php" id="srdce">Obchod</a>
<nav>
<a href="priprava_navod.php">Jak připravit matcha čaj</a>
<a href="jakaje.php">Jak vychutnat matcha čaj</a>
<a href="recepty.php">recepty</a>
</nav>
</div>
<div class="rozbalit"><a href="poznejte.php">poznejte matcha</a>
<nav>
<a href="priprava_navod.php">Jak připravit matcha čaj</a>
<a href="jakaje.php">Jak vychutnat matcha čaj</a>
<a href="recepty.php">recepty</a>
</nav>
</div>
<div class="rozbalit"><a href="priprava_navod.php">příprava</a>
<nav>
<a href="priprava_navod.php">Jak připravit matcha čaj</a>
<a href="jakaje.php">Jak vychutnat matcha čaj</a>
<a href="recepty.php">recepty</a>
</nav>
</div>
<a href="clanek.php">blog</a>
<a href="pribeh.php">o nás</a>
</div>
<div class="kolonky" id="strana">
<div id="uzivatel">
<a href="ucet.php" id="prihlaseni_otevri">Jaroslava B</a>
<nav class="uziv_info">
<a href="ucet.php">Moje objednávky</a>
<a href="ucet.php">Moje adresy</a>
<a href="ucet.php">nákupní košík</a>
<a href="#">odhlásit</a>
<a href="#">nastavení</a>
</nav>
</div>
<a href="#"><div class="kosik">
<span>15</span>
</div></a>
<span id="jazyky">CZ</span>
</div>
</div>
</div>
</div>
</div>
.hidden_scr{
display: none !important;
}
.menu{
width: 100%;
background: transparent;
transition-duration: 0.3s;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.menu.cloned{
background: rgba(255,255,255,0.8);
z-index: 5;
}
.menu_tab{
width: 60%;
margin: 0px auto;
padding: 20px 0px;
display: table;
text-align: center;
vertical-align: middle;
table-layout: fixed;
background: transparent;
}
.menu_wr{
display: inline-block;
margin-bottom: -5px;
}
.menu_wr.grey{
background: #edecf0;
}
.menu.grey.cloned{
background: rgba(255,255,255,0.8);
}
.menu .obsah{
display: table-row;
}
$('.menu').addClass('original').clone().insertAfter('.menu').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','3').removeClass('original').hide();
scrollIntervalID = setInterval(stickIt, 10);
function stickIt() {
var orgElementPos = $('.original').offset();
orgElementTop = orgElementPos.top;
if ($(window).scrollTop() >= (orgElementTop)) {
orgElement = $('.original');
coordsOrgElement = orgElement.offset();
leftOrgElement = coordsOrgElement.left;
widthOrgElement = orgElement.css('width');
$('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement).show();
$('.original').css('visibility','hidden');
} else {
$('.cloned').hide();
$('.original').css('visibility','visible');
}
}
var lastScrollTop = 0;
// element should be replaced with the actual target element on which you have applied scroll, use window in case of no target element.
window.addEventListener("scroll", function(){ // or window.addEventListener("scroll"....
var st = window.pageYOffset || document.documentElement.scrollTop; // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
if (st > lastScrollTop){
$('.menu.cloned').addClass("hidden_scr");
} else {
$('.menu.cloned').removeClass("hidden_scr");
}
lastScrollTop = st;
}, false);