I've got a menu (div) and it's fixed. I need a code, which makes it disappear while scrolling and appear while stopping. I've got some code, but it appears immediately when I stop scrolling... I want it to wait some time if the user doesn't want to scroll more and so one... Just to make it to not appear after each inch I scroll.
$(window).scroll(function(){
if($(this).scrollTop() > 200){$('.menu.cloned').fadeOut('slow')
}else{
if($(this).scrollTop() < 200) $('.menu.cloned').fadeIn('slow')}
});
$(window).on("scroll", function(){
$('.menu.cloned').fadeOut('slow');
clearTimeout( menuFadeInTimeout );
menuFadeInTimeout = setTimeout(function(){
$('.menu.cloned').fadeIn('slow');
}, 1000 );
});//
Here is another way that utilizes debounce. This will probably be a bit more performant as you won't be running the above code every scroll event.
$(window).scroll($.debounce(1000, true, function() {
$('.menu.cloned').fadeOut('slow');
}));
$(window).scroll($.debounce(1000, function() {
$('.menu.cloned').fadeIn('slow');
}));
None of those codes above did not work :'(
My code is:
.menu{
width: 100%;
padding: 10px 0em 5px;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
display: block;
z-index: 100;
background: rgba(0,0,0,0.5);
}
.menu #mobil{
display: none;
}
.menu .content_menu{
width: 85%;
margin: 0px auto;
display: block;
}
.menu .content_menu .logo{
float: left;
width: 20%;
}
.menu .content_menu .logo img{
height: 5.5em;
}
.menu .content_menu .polozky{
float: right;
width: 78%;
vertical-align: top;
text-align: right;
}
.menu .content_menu .polozky .menu_polozky{
display: inline-block;
vertical-align: top;
}
.menu .content_menu .polozky .menu_polozky a{
font-size: 1.2em;
color: white;
text-decoration: none;
margin: 1.5em 0.5em;
text-transform: uppercase;
padding: 0.4em 0em;
display: inline-block;
}
.menu .content_menu .polozky .menu_polozky a[id="active"]{
border-bottom: 1px solid white;
}
.menu .content_menu .polozky .menu_polozky a:hover{
border-bottom: 1px solid white;
padding-bottom: calc(0.4em - 1px);
}
.menu .content_menu .polozky .ostatni{
display: inline-block;
vertical-align: top;
margin-left: 1em;
}
.menu .content_menu .polozky .ostatni .socialni{
display: block;
}
.menu .content_menu .polozky .ostatni .socialni img{
width: 1em;
height: 1em;
margin: 5px 0.2em;
}
.menu .content_menu .polozky .ostatni .ramovane{
display: inline-block;
padding: 6px 10px;
border: 1px solid white;
border-radius: 3px;
margin: 0.4em;
font-size: 0.8em;
color: white;
text-decoration: none;
text-transform: uppercase;
transition-duration: 0.3s;
font-weight: 500;
}
.menu .content_menu .polozky .ostatni .ramovane:hover{
color: black;
background: white;
}
And:
<div class="menu <?php echo $menu_druh; ?>">
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.