[英]Make menu stay on top but not when scrolling down for side scroll website
我正在開發一個滾動到側面的網站,並且使用固定位置將菜單保持在頂部,但是我意識到當我向下滾動時,菜單也會向下滾動。 我想知道當滾動到側面時是否有一種方法可以將菜單保持在頂部,但是當我向下滾動時它不會下降。
因此,我嘗試使用相對於身體的絕對位置,但是當我進行側向滾動時,這不會使菜單位於頂部。
#menu
{
background : url(images/banner5.gif) no-repeat;
height : 60px;
margin-top : 20px;
position : absolute;
left : 450px;
}
#menuFloat li
{
display : inline;
float : left;
padding : 8px 20px 0px 30px;
}
#menuFloat li a
{
color : #9d0c10;
font-family : Erato;
font-size : 12pt;
font-style : italic;
text-decoration : none;
}
$(document).ready(function() {
$("#menuFloat a").bind("click",function(event){ event.preventDefault();
var target = $(this).attr("href");
$("html, body").stop().animate({ scrollLeft: $(target).offset().left, scrollTop: $(target).offset().top }, 1200);
}); });
<div id="menu">
<ul id="menuFloat">
<li><a class="nav1" href="#nav1">Home</a></li>
<li><a class="nav2" href="#nav2">About Us</a></li>
<li><a class="nav3" href="#nav3">Members</a></li>
<li><a class="nav4" href="#nav4">Events</a></li>
<li><a class="nav5" href="#nav5">Media</a></li>
<li><a class="nav6" href="#nav6">Contact Us</a></li>
</ul>
</div>
第一部分是菜單的CSS,第二部分是如何水平滑動的jquery代碼,第三部分是菜單的html。
如果您對我的問題感到困惑,請在此處檢查: http : //permika-montreal.tk/new.php向下滾動時,您也會看到菜單也確實如此,我希望這種情況不會發生。
您可以通過在用戶使用JavaScript / jQuery進行水平滾動時更新left
CSS屬性來完成此操作。
參見: https : //stackoverflow.com/a/9423822/1718121
$(window).scroll(function(event) {
var x = $(this).scrollLeft();
$("#menu").css("left", x + offset); //Change offset to be the default margin-left of your menu.
}
看這里
#menu
{
background : url(images/banner5.gif) no-repeat;
height : 60px;
top : 20px;
position : absolute;
left : 50px;
}
jQuery的
$(document).ready(function(){
var lastScrollLeft = 0;
$(window).scroll(function() {
var documentScrollLeft = $(document).scrollLeft();
if (lastScrollLeft != documentScrollLeft) {
console.log('scroll x');
lastScrollLeft = documentScrollLeft;
$("#menu").css("left", lastScrollLeft+50);
}
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.