javascript - 如何阻止 Jquery 下拉菜单随页面滚动?

标签 javascript jquery html css

所以我在使用 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>

Normal

然后,当滚动并向下滚动时,jquery 链接会在页面下方。

这个可以在androiddevelopmentdepot.com上看到直播

最佳答案

我不明白你为什么要计算它的最高排名。修复top,能解决你的问题吗?

试试这个:

submenu.css({
    position:'absolute',
    top: 75,
    left: $(this).offset().left + 'px',
    zIndex:1000
});

关于javascript - 如何阻止 Jquery 下拉菜单随页面滚动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22076618/

相关文章:

jquery - 用 animate() CSS3 替换 jQuery 幻灯片

javascript - 获取 <tr> 的第 n 个子元素

html - 批处理 - 找到匹配字符串时拆分 html 文件

javascript - 文本节点可以开槽吗?

php - 属性之间没有空格错误

javascript - JS/jQuery 用于赋值

javascript - 按 T​​AB 键从 javascript 调用 servlet

javascript - iframe 加载延迟

jquery - 为什么在调整页面大小时( Bootstrap )我的部分 html 代码消失了?

html - 苹果脚本 : How can I copy html content to the clipboard?