根据鼠标位置滚动导航栏不光滑需要改进

我试图移动导航栏取决于鼠标位置的工作，但我不能使平滑当我将鼠标移动到一个点然后停止，裕度顶部花费很长时间来更新新值。这使得它看起来平滑的动画像jittring代替根据鼠标位置滚动导航栏不光滑需要改进

function nav_animate(e) { 
var mouse_y = e.pageY; 
if (mouse_y < 200) { 

var old_y = $("#nav-style").css('margin-top').replace('px', ''); 
var new_y = parseInt(old_y); 
var tmp = -(mouse_y + new_y); 
if (tmp > 0) { 
    tmp = 0; 
} 
$("#nav-style").css({ 'margin-top': tmp + 'px' }); 
}else { 
    $("#nav-style").css({ 'margin-top': '-101px' }); 
} 
} 

$(document).ready(function() { 
$(document).on('mousemove', nav_animate); 
});

，因为我没有提出我的问题以及这里是该网站即时通讯的链接做here

来源

2017-08-01 Nabeel Sultan

使用'translateX' CSS变换修改的保证金来代替。 Cf [用CSS3实现60 FPS动画]（https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108） –

它是页面将滚动到在页面中特别是'div'？ –

没有它的只是导航栏下降鼠标走近 –

为什么不使用CSS的力量？

这里有一个简单的例子：

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
    <style> 
 
    ul { 
 
     list-style-type: none; 
 
     margin: 0; 
 
     padding: 0; 
 
     width: 200px; 
 
     background-color: #f1f1f1; 
 
    } 
 
    
 
    li a { 
 
     display: block; 
 
     color: #000; 
 
     padding: 8px 16px; 
 
     text-decoration: none; 
 
    } 
 
    
 
    /* Change the link color on hover */ 
 
    li a:hover { 
 
     background-color: #555; 
 
     color: white; 
 
    } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    
 
    <h2>Vertical Navigation Bar</h2> 
 
    
 
    <ul> 
 
     <li><a href="#home">Home</a></li> 
 
     <li><a href="#news">News</a></li> 
 
     <li><a href="#contact">Contact</a></li> 
 
     <li><a href="#about">About</a></li> 
 
    </ul> 
 
    
 
    </body> 
 
    </html>

来源

2017-08-01 20:52:11 Crazed

根据鼠标位置滚动导航栏不光滑需要改进

回答

相关问题