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

Question

我正在尝试根据导航的鼠标位置移动导航栏，但是当我将鼠标移至某个点然后停止时，我无法使其平滑，边距顶部花费的时间太长，无法更新新值。 这使它看起来像抖动，而不是平滑的动画

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

因为我没有很好地提出我的问题，所以这里是我在这里做的网站的链接

Answer 1

为什么不使用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>

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

问题描述

1 个解决方案

解决方案1
0 2017-08-01 20:52:11

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

问题描述

1 个解决方案

解决方案1 0 2017-08-01 20:52:11

解决方案1
0 2017-08-01 20:52:11