1
通常のブロック表示div、beacuseというメニューがあります。上記の注釈付きdivがあります。スクロールするときにメニューが固定されたまま上部にスティックしたいが、すぐに隠すようにする。これは、ユーザーがスクロールを停止すると表示され、ユーザーがスクロールすると、スクロールが表示されたとき、スクロールダウン時などにスクロールし、スクロールしていないときに常に表示されるためです。スクロールダウン時にJavaScriptメニューが非表示になります。停止時に表示されます。
誰でもお手伝いできますか?
はここに私のメニューのコードです:
<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);
:)を完了(のhttp:/ /stackoverflow.com/help/self-answer)。 –