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

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

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的站点的链接

最佳答案

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