如何阻止Jquery從頁面滾動下拉菜單？

因此Im具有與jQuery的下拉列表中，其中，如果我向下滾動頁面出了問題，下拉菜單會出現越往下而不是他們應該下的按鈕直接..如何阻止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觀看

來源

2014-02-27 sirnomnomz

爲什麼你施加偏移到子菜單的'top'財產？ –

這裏沒有發生，你使用的是什麼瀏覽器/操作系統。在Win/Chrome（最後版本）中是好的 –

@GiuseppeR它發生在所有瀏覽器中。將鼠標懸停在菜單上可查看子菜單，將鼠標從菜單中移出，然後向下滾動一小部分。將鼠標放回菜單上，子菜單將移動。順便提一下， –

我不明白你爲什麼要計算它的頂部位置。修復頂部，可以解決你的問題？

試試這個：

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

來源

2014-02-27 18:07:49

默認頂部是70px –

如何阻止Jquery從頁面滾動下拉菜單？

回答

相關問題