Maintaining my navigation menu as you scroll through the page

I've been working on creating a website for my business but I'm facing a challenge.

My goal is to have a fixed navigation bar that stays in place as people scroll down the page,

similar to what you can see on this website: (where the navigation bar remains fixed while scrolling)

I am using jQuery 1.8.3.min.js and the following code:

$(window).bind('scroll', function() {
     if ($(window).scrollTop() > 50) {
         $('.nav').addClass('absolute');
     }
     else {
         $('.nav').removeClass('fixed');
     }
});

Here is how the CSS looks:

header .nav{
top: 55px;
padding: 0;
min-height: 0;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 0.5px;
line-height: 3px;
width: 100%;
position: absolute;
z-index: 999;
}

.fixed{
position: fixed;
top: 0;  }

However, I am not able to get it to work correctly. Does anyone have any suggestions on how to fix it?

Thank you!! :D

p.s. Please excuse any mistakes in my English.

javascriptjquerycss

Answer №1

Consider flipping the logic around.

$(window).on('scroll', function() {
     if ($(window).scrollTop() > 50) {
         $('.nav')
          .removeClass('absolute')
          .addClass('fixed');
     }
     else {
         $('.nav')
          .removeClass('fixed')
          .addclass('absolute');
     }
});

Also included a removeClass to avoid any conflicts with class priorities.

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

The animation in Rive feels sluggish when navigating to a page with animation in Blazor WASM, despite implementing dispose methods

After attempting to display river animation on the index page using Blazor WASM (basic template), I encountered some performance issues. When navigating back and forth between the Counter page and the index page, I noticed that after around 20 clicks, the ...

javascriptblazorblazor-webassemblyrive

Issue with Yup and Formik not validating checkboxes as expected

I'm struggling to figure out why the validation isn't functioning as expected: export default function Check() { const label = { inputProps: { "aria-label": "termsOfService" } }; const formSchema = yup.object().shape({ ...

javascriptvalidationmaterial-uiformikyup

Executing mailto URLs from action method

As a newcomer to MVC, I am looking to create an action method in MVC that triggers Mailto:?body=body goes here.&subject=test subject, allowing the default mail client to automatically populate the user's email. Currently, I have a List<String&g ...

javascriptmailtowindow.locationactionmethod

Create a unique command that will run regardless of the success or failure of the command before

Even if a preceding command fails, the end command is still executed. For example: browser.waitForElementIsVisible("non-existing-item", 500).end() I am looking to create a custom command that always gets called in the same way as the end command. When I t ...

javascriptseleniumtestingautomated-testsnightwatch.js

Every time Chrome on Android returns a keyCode of 229

Here is a snippet of code that I am having trouble with: ... @HostListener('keydown', ['$event']) onKeyDown(evt: KeyboardEvent) { console.log('KeyCode : ' + evt.keyCode); console.log('Which : ' + evt.which); ...

javascriptangulargoogle-chrome

Requesting information asynchronously returns a positive response

I wrote the following code: if (venue_exists(instagramUserID)){ alert('A'); }else { alert('C'); } function venue_exists(instagramUserID) { $.get( "/venues/" + instagramUserID, function( ...

javascriptjqueryasynchronousget

Adjusting the page size in the material table to display all items

I am currently working with React and Material Table. Objective My goal is to provide the user with the option to set the pageSize to 'All' in order to display all rows in the material table. Steps Taken I utilized the useState hook to create ...

javascriptreactjsmaterial-ui

Using PHP to detect changes in input fields upon page load with jQuery

I have a jQuery snippet on my page: $( document ).ready(function() { $("#URL").on("input load", function(e) { console.log(e.type) .... }); }); Further down the page, I also have... <input id="URL" type="text" value="<?=$_GE ...

javascriptphpjquery

Is it possible for me to retrieve the error message from my response?

Currently, I am working on displaying backend error messages on the frontend. My approach involves sending a response with an error code and message, then setting a state in my React component to display the error message. While I can successfully display ...

javascriptnode.jsreactjsexpress

Why does the address bar show value changes in IE when using window.location.hash, but the value doesn't change in the DOM when going

Here is a sample JavaScript code that attempts to detect the back button event: document.location.hash="#1"; document.location.hash="#2"; document.location.hash="#3"; function check() { if("#3"!=window.location.hash) { alert("Back button clic ...

javascriptinternet-explorernavigation

When working with ajax, you can easily refer to elements by using the $(this)

I am having trouble using the $(this) selector in the ajax success function to target the element with the class .selectclass that was double-clicked before. Any suggestions on how to make this work within the ajax success function? Here's the jQuery ...

jqueryhtmlajax

Fetching information from server proves to be sluggish within AngularJS application

In the process of developing a web application, I am faced with the task of sending numerous $http requests to the server. My front-end is built using AngularJS while the back-end utilizes ExpressJS. The $http requests are currently being made as shown in ...

javascriptangularjsexpress

Iterate endlessly over CSS styles in Angular 4

I'm looking to create a website background 'screensaver' by looping through an array of background URLs with a delay between switches. Currently, I have the array stored in my .ts file and I am using the NgFor directive in my HTML. However, ...

javascripthtmlcssangular

Manage and modify data values

Currently, I am developing a weather forecast app and facing an issue with changing the temperature from Celsius to Fahrenheit upon hovering. Despite my attempts, the changes I make either do not reflect or completely erase the line. I am eager to learn ...

javascriptjqueryhtml

When utilizing div.load, jQuery and other JavaScript sources may not be defined

When you load a page using jQuery load: $("#myDiv").load("page.php",{foo: bar}); The head section is included in the index: <head> <script src="/assets/plugins/jQuery/jQuery-2.1.4.min.js"></script> <script src="/assets/plugi ...

javascriptphpjqueryajax

When utilizing jade.compile for compiling a jade template containing mixins or included partials

I'm currently exploring solutions for this challenge. The issue at hand involves compiling a jade template for an email campaign, but the file I am attempting to compile is a mixin that includes some partials. Here's an example: controllers/us ...

javascriptnode.jsexpresspug

Implementing a Scroll Bar within a Stack Component in Material UI

I've developed a component and now I'm looking to enable scrolling when it expands beyond the screen width <Stack direction="row"> <Stack gap={1} overflow="auto"> {fields.map((el, i) => ( ...

cssreactjsnext.jsmaterial-ui

Exploring techniques to query a Mongoose/Express array generated from a select multiple option

I am currently working on a search form that utilizes the select multiple attribute. Below is the code snippet for the form. <form action="/search" method="get"> <select name="q" multiple> <optgroup label="Fruit"> <option ...

javascriptnode.jsmongodbexpressmongoose

The process of encoding Point of Sale (POS) data as application/x-www-form-urlencoded

Can anyone provide guidance on how to correctly POST a URL encoded as application/x-www-form-urlencoded? I have all the necessary variables for the API suggestion below, but I'm struggling with posting it correctly. Thank you in advance for your help ...

javascriptphpajax

Incorporating the sx attribute into a personalized component

I am currently incorporating MUI v5 along with Gatsby Image in my project. To maintain consistency in my styling syntax throughout the application, I decided to include the sx prop in the GatsbyImage component. This is how I attempted it: <Box compon ...

javascriptreactjsmaterial-ui