我正在开发一个滚动到侧面的网站,我使用固定位置将菜单保持在顶部,但我意识到当我向下滚动时,菜单也会向下滚动。我想知道是否有一种方法可以让菜单在我滚动到侧面时保持在顶部,但在我向下滚动时它不会下降。
所以我尝试使用相对于 body 的绝对位置,但是当我横向滚动时,这并不能使菜单保持在顶部。
#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.
}
关于javascript - 使菜单保持在顶部,但在向下滚动侧滚动网站时不会,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14667449/