faire défiler la barre de navigation en fonction de la position de la souris n'est pas lisse besoin amélioration

J'essaie de déplacer la barre de navigation en fonction de la position de la souris qui fonctionne, mais je ne peux pas faire lisse lorsque je déplace la souris à un point, puis arrêter, la marge supérieure prend trop de temps pour mettre à jour les nouvelles valeurs. ce qui le fait ressembler à jittring au lieu d'une animation fluidefaire défiler la barre de navigation en fonction de la position de la souris n'est pas lisse besoin amélioration

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

depuis que je n'ai pas présenté mon problème bien ici est un lien vers le site im faisant here

Source

2017-08-01 Nabeel Sultan

utilisation 'translateX' CSS transformer au lieu de modifier la marge. Cf [Réalisation de 60 animations FPS avec CSS3] (https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108) –

Est-ce que la page va défiler vers un particulier 'div' dans la page? –

non c'est juste la barre de navigation qui descend le plus près de la souris –

Pourquoi ne pas utiliser la pouvoir de CSS?

Voici un exemple simple:

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

Source

2017-08-01 20:52:11 Crazed

faire défiler la barre de navigation en fonction de la position de la souris n'est pas lisse besoin amélioration

Répondre

Questions connexes