gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 03:16:34 26 4
gpt4 key购买 nike

i'm trying to move the nav bar depending on the mouse position which works but i cant make smooth when i move the mouse to a point then stop ,the margin top is taking too long to update the new values. which makes it look like jittring instead of smooth animation

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

since i didn't present my problem well here is a link to the site im doing 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>

关于javascript - 根据鼠标位置滚动导航栏不流畅需要改进,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45447435/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com