[英]How to stop Jquery dropdown from scrolling with page?
So im having a problem with a Jquery dropdown, where if i scroll down the page, the dropdown will appear farther down rather then where they should be directly under the button.. 所以我有一个jQuery下拉菜单的问题,如果我向下滚动页面,下拉菜单将显示得更远,而不是它们应该直接位于按钮下方。
<!doctype html>
<html>
<head>
<title></title>
<link href="/Nexus 5/Website style.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var timeoutID;
$(function(){
$('.dropdown').mouseenter(function(){
$('.sublinks').stop(false, true).hide();
window.clearTimeout(timeoutID);
var submenu = $(this).parent().next();
submenu.css({
position:'absolute',
top: $(this).offset().top + $(this).height() + 'px',
left: $(this).offset().left + 'px',
zIndex:1000
});
submenu.stop().slideDown(300);
submenu.mouseleave(function(){
$(this).slideUp(300);
});
submenu.mouseenter(function(){
window.clearTimeout(timeoutID);
});
});
$('.dropdown').mouseleave(function(){
timeoutID = window.setTimeout(function() {$('.sublinks').stop(false, true).slideUp(300);}, 250);
});
});
</script>
</head>
<body>
<div id="header" style="position: fixed; ">
<img src="smalllogo.png" style="float:left; width:180px; height:73px;">
<div class="nav">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="Nexus 5/Nexus 5 (home).html" class="dropdown" >Nexus 5</a></li>
<li class="sublinks">
<a href="Nexus 5/Nexus 5 (info).html">Info</a>
<a href="Nexus 5/Nexus 5 (root & unlock).html">Root & Unlock</a>
<a href="Nexus 5/Nexus 5 (recovery).html">Recoveries</a>
<a href="Nexus 5/Nexus 5 (roms).html">ROMs</a>
<a href="Nexus 5/Nexus 5 (kernels).html">Kernels</a>
<a href="Nexus 5/Nexus 5 (other).html">Other</a>
</li>
<li><a href="Galaxy S4/GS4 (home).html" class="dropdown">Galaxy S4</a></li>
<li class="sublinks">
<a href="Galaxy S4/GS4 (info).html">Info</a>
<a href="Galaxy S4/GS4 (root & unlock).html">Root & Unlock</a>
<a href="Galaxy S4/GS4 (recovery).html">Recoveries</a>
<a href="Galaxy S4/GS4 (roms).html">ROMs</a>
<a href="Galaxy S4/GS4 (other).html">Other</a>
</li>
<li><a href="../about.html">About</a></li>
</ul>
</div>
</div>
Then when rolling over, and scrolled down, the jquery links go way down the page. 然后,当滚动并向下滚动时,jquery链接会沿页面向下移动。
This can be viewed live from androiddevelopmentdepot.com 可以从androiddevelopmentdepot.com实时查看
I couldn't understand why you're calculating the top position of it. 我不明白您为什么要计算它的最高位置。 Fixing top, could solve your problem? 修复顶部,可以解决您的问题吗?
Try this: 尝试这个:
submenu.css({
position:'absolute',
top: 75,
left: $(this).offset().left + 'px',
zIndex:1000
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.