scrollen die nav bar je nach maus position ist nicht glatt brauchen verbesserung

ich versuche, die nav bar je nach der maus position zu bewegen, die funktioniert, aber ich kann nicht glatt machen, wenn ich die maus zu einem punkt dann halt, Der Rand oben dauert zu lange, um die neuen Werte zu aktualisieren. die es wie jittring aussehen statt glatte Animationscrollen die nav bar je nach maus position ist nicht glatt brauchen verbesserung

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); 
});

, da ich nicht mein Problem darstellen, auch hier ist ein Link auf die Website im tut here

Quelle

2017-08-01 Nabeel Sultan

Verwendung 'translateX' CSS verwandeln, anstatt den Rand zu modifizieren. Cf [Erzielen 60 FPS Animationen mit CSS3] (https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108) –

Ist es Seite wird zu einem scrollen insbesondere 'div' in der Seite? –

Nein, es ist nur die Navigationsleiste herunterfallen, je näher die Maus kommen –

Warum nicht verwenden Macht von CSS?

Hier ist ein einfaches Beispiel:

<!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>

Quelle

2017-08-01 20:52:11 Crazed

scrollen die nav bar je nach maus position ist nicht glatt brauchen verbesserung

Antwort

Verwandte Themen