根據鼠標位置滾動導航欄不光滑需要改進

我試圖移動導航欄取決於鼠標位置的工作，但我不能使平滑當我將鼠標移動到一個點然後停止，裕度頂部花費很長時間來更新新值。這使得它看起來平滑的動畫像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

根據鼠標位置滾動導航欄不光滑需要改進

回答

相關問題