The navigation bar scrolling based on mouse position lacks smoothness and could use some enhancement

I'm currently working on adjusting the navigation bar based on the mouse position. It seems to be functioning, but I'm facing an issue with smoothing out the animation. When I stop moving the mouse to a certain point, there is a delay in updating the margin-top values which results in a jittery effect instead of a smooth transition.

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

Given that I may not have explained my problem clearly, here is a link to the website I am working on: here

javascriptjqueryhtmlcsssmoothing

Answer №1

Why not harness the capabilities of CSS for your design needs?

Take a look at this straightforward illustration:

    <!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;
    }
    
    /* Adjust link appearance 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue: A child component's function is unable to update the state of the parent component

I have been working on a project using React. Below is the code for the parent component: class Parent extends Component { constructor(props) { super(props); this.state = { deleteConfirm: false }; } onDelete = pass => { thi ...

javascriptreactjsmaterial-ui

Using JavaScript to control the state of a button: enable or

In the process of creating a basic HTML application to collect customer information and store it in a database, I have encountered a specific user interface challenge. Once the user logs into their profile, they should see three buttons. Button 1 = Print ...

javascriptjqueryhtmlcookiessession-state

The image seems to be misaligned inside the DIV, and interestingly, this issue appears to be

http://jsfiddle.net/Bzpj4/ The situation depicted in the DIV above is quite puzzling. A 120x120 image is contained within a 120x120 DIV, which is then placed inside a larger DIV with a height of 120px. Strangely, the image within the larger DIV seems to b ...

csshtml

How can the click event for a SubMenu in Ant Design be deactivated?

Is there a way to keep the SubMenu from toggling its child menus when clicked, without disabling it? I would like the SubMenu to maintain its appearance while preventing its children from expanding or collapsing. ...

javascriptreactjsantd

How can we display a tool tip when hovering over the matoptions depending on a specific condition?

<mat-select class="dropBox" placeholder="Select One" (selectionChange)="mymethod($event.value)" style="background-color:#FFFFFF;"> <mat-option *ngFor="let option of myList" [val ...

htmlcssangular

The z-index of 999 in CSS is not functioning as expected on both Google Chrome and Safari browsers

To ensure the slider text is readable in white color, we have applied a black background with 0.65 opacity CSS on the slider image. This allows the white text to stand out effectively. The following CSS code was used for this effect: .zlslides .ms-slide- ...

csswordpressgoogle-chromez-indexopacity

"Utilizing Primeng's P-Table Component for Enhanced Interactivity

https://i.sstatic.net/UQZYV.png Greetings to all! I am currently working with p-table, p-headercheckbox, and p-tableCheckbox along with additional filters for each column. However, I am encountering an issue where the filters are not aligning properly wit ...

htmlangularfrontendprimengprimeng-datatable

Managing numerous callbacks for a specific route within Express.js

After going through the Express.js documentation, I came across a section discussing how to handle callbacks for routes using the syntax: app.get(path, callback [, callback ...]) However, I encountered difficulty in finding an example that demonstrates ...

javascriptnode.jsexpress

Navigating Websites in Google Search

Whenever I search for keywords related to my website on Google, the search results show my website's content and address. However, when I click on the link, it redirects me to a different unrelated website. Click here to view an image ...

htmlgoogle-search

JavaScript Error: Unable to execute getJsonData due to function not found

I am encountering an issue with a function that retrieves JSON data from a URL Here is the code snippet: var retrieveJsonData = function(uri,callback){ $.ajax({ type: "GET", dataType: "jsonp", url: uri, jsonpCallback: 'r ...

javascriptjqueryjson

Is there a way to detect browser errors using JavaScript or Angular 2?

On the back-end, I am looking to add these uncaught errors to the log file. These errors are not being captured in angular2. How can I go about reading and handling these errors?https://i.sstatic.net/Kljon.png ...

javascriptangularbrowser

"Enhance your data management with Laravel and Vue.js by incorporating the powerful Matfish Vue-Table

Currently, I am utilizing matfish-vue-table2 along with server-side implementation. Below is my Laravel controller where I am able to retrieve the JSON response from the 'api/articles' URL: public function index() { $articles = Article::orde ...

javascriptlaravelvue.jsvuejs2

What is the best way to find all the corners along a path?

I am working with an SVG path and I need to find all the extremum points (corners) on this path. How can I achieve this? I attempted to retrieve all points using the following code: let totalLength = path.getTotalLength(); for (var i = 0; i < totalL ...

javascriptsvg

jQuery accordion is currently in the expanded state

I'm currently in the process of creating an accordion using jQuery, following this example: http://docs.jquery.com/UI/Accordion The structure remains the same: <div id="accordion"> <h3><a href="#">First header</a></h3& ...

jquery

Invoke a handler from one function within another function

I am unsure of the best approach for achieving this, or if it is even feasible, but I have two components: a main navigation bar (NavBar) that spans across the top of the page, and a sidebar drawer. NavBar: export default function NavBar() { const c ...

javascriptreactjsmaterial-ui

Parsing JSON in an Express application

I have developed a small application to test a larger one that I am currently working on. The small application reads data from a CSV file and then attempts to send this data to my API endpoint using POST requests. This is necessary as I need to send a lar ...

javascriptjsonnode.jsexpress

Awesome method of redirecting outdated URLs to the most recent established URL

My website heavily relies on JavaScript and communicates with a .NET C# RPC service. We encountered an issue where clients' browsers cached the JavaScript, so we decided to add a version number to the URL in order to force them to use the latest JavaS ...

c#javascriptasp.netiis-8http-redirect

Validation for optional fields in asp.net mvc 5

In my asp.net mvc 5 application, I have a form with some fields that are optional and not required to be filled. Despite trying different approaches, I keep getting a warning message stating that these fields are required. [Required(AllowEmptyStrings = t ...

c#htmlasp.netasp.net-mvcrazor

Discover in Mongo DB with Mongoose, except for the find() method, which excludes documents containing a specific property

I'm searching for a condition in Mongoose that will help me locate all users except those with the role 'Admin':2000. Keep in mind that admin users also have other roles, such as "User" and "Editor", as shown below: { "name": &q ...

javascriptnode.jsmongodbexpressmongoose

How to properly handle file uploads and get the correct image path from Node Js (Express) to React Js?

Currently, I am working on my local system developing a file upload feature using node js. My project file structure looks like this: Project ..client .... source code of React App ..Server ....uploads ......avatar ........image.png ....index.js In this ...

javascriptnode.jsreactjsapiexpress