How can I eliminate a class when the scrollTop() position matches a specific div element?

I am trying to implement a script that will allow me to scroll to my navigation and then change the class of the navigation, however, it is not working as expected.

$(window).scroll(function() {
  if ($(window).scrollTop == $('.menu_nav').offset().top) {
    $('.menu_nav').removeClass('menu_nav').addClass('nav_scroll');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu_nav">
  <ul>
    <li><a href="#">About Me</a>
    </li>
    <li><a href="#">Portfolio</a>
    </li>
    <li><a href="#">Contact Me</a>
    </li>
  </ul>
</div>

jquerycss

Answer №1

The issue with your code not functioning correctly is due to the use of dots (.) within the .addClass() and .removeClass() methods.

$('.menu_nav').removeClass('.menu_nav').addClass('.nav_scroll');

should be 
$('.menu_nav').removeClass('menu_nav').addClass('nav_scroll');

Example

$(document).ready(function() {
  $(window).scroll(function() {
    if ($(".menu_nav").length > 0 && $(window).scrollTop() == $('.menu_nav').offset().top) {
      $('.menu_nav').removeClass('menu_nav').addClass('nav_scroll');
    }
  });
});
.menu {
  height: 200vh;
  background: yellow;
}

.menu_nav {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100px;
  background-color: blue;
}

.nav_scroll {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100px;
  background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
  <div class="menu_nav">
    <ul>
      <li><a href="#">About Me</a>
      </li>
      <li><a href="#">Portfolio</a>
      </li>
      <li><a href="#">Contact me</a>
      </li>
    </ul>
  </div>
</div>

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

Achieve a vertical fill effect within a parent container using CSS to occupy the remaining space

I have set my sights on a specific goal. https://i.sstatic.net/BqqTX.jpg This represents my current progress in achieving that goal. https://i.sstatic.net/unQY9.jpg On the left side, I have an image with a fixed height. The aqua color fills the left s ...

htmlcssbootstrap-5

Automatically update div content using jQuery including an AJAX request for loading

I have successfully implemented a method for loading output from now_playing.php (shoutcast now playing content) using a jQuery include ajax call, as recommended in this answer on Stack Overflow. Here is my code: <script> $(function(){ $("#now_ ...

javascriptjqueryhtmlajax

Send information without having to refresh the page using ajax in Laravel version 5

Looking for help with posting data using AJAX without reloading the page in Laravel 5. I'm new to Laravel and struggling to figure out how to post data from input fields in a textarea. Here's the code I have so far: Routes <?php Route::gro ...

jqueryajaxlaravel

Attempting to implement ajax for form submission, however finding that the $_POST array is coming back as empty

I'm attempting to send JavaScript arrays to a new page using Ajax. Although there are numerous questions on this topic on Stack Overflow, I have decided to implement Ajax in the following manner after examining various answers: var test = {}; test[& ...

phpjavascriptjqueryajax

Resolving Conflicting CSS Styles

It's frustrating to constantly have to ask questions. I've been struggling to implement code on my website, but every time I try to add something new, it just doesn't work. I even tried changing the CSS names, thinking that might solve the i ...

htmlcss

The implementation of a secondary sidebar for internal pages

Currently, I am in the process of customizing a Wordpress theme and my goal is to achieve a similar 3-column layout for the homepage as seen on . Specifically, I am interested in replicating the inner sidebar's custom image title. The theme I'm ...

phpcsswordpress

jQuery mobile menu: Scroll to content after closing the menu

I am currently working on a project where I am using mmenu for the first time. It's functioning as expected, but there is one particular issue that I would really like to have resolved. Here is the URL: What I am hoping to achieve is that when a men ...

javascriptjqueryhtmlmmenu

The span element remains the same width even with the display property set to flex

How can I center a span element within a container div when the span is preceded by another div? Here's my current code: <div id="container"> <div id="a">A</div> <span id="b">B</span> </div> #container { ...

htmlcssflexbox

How to ensure the table fits perfectly on the screen using JQueryMobile and Cordova?

I've been working on a JavaScript function that creates a dynamic page and displays data fetched from a database. However, I've encountered an issue where the displayed data overflows past the width of the mobile screen. Is there a way to ensure ...

javascriptjquerycsscordovajquery-mobile

Is it possible to add a vertical scrollbar to the vertical navigation pills on a Bootstrap

Is it possible to create a vertical scroll bar for my nav pills when they exceed the screen size? /* * * ========================================== * CUSTOM UTIL CLASSES * ========================================== */ .nav-pills-custom .nav-link { c ...

javascripthtmlcssbootstrap-4

My goal is to dynamically adjust the height of this section based on its content

I experimented with this code snippet: <section class="unique"> <div class="this d-flex pt-5"> <div class="leftside2 w-50 h-100"> <img src="images/twowomen.jpg" alt=" ...

htmlcssbootstrap-4

Unable to initialize styles in a newly created Angular CLI project

Just finished setting up a new project with the angular cli. Encountering an issue when trying to link the styles.css file in index.html <link rel="stylesheet" type="text/css" href="styles.css"> Getting the following error in Chrome's dev too ...

cssangulargoogle-chromeangular-cli

Choosing data based on specific conditions in a database using PHP when the $_POST array is empty and contains a

I am having trouble selecting data from my database using PHP and an ajax call function. In the select function, I am using $_POST to retrieve data from a textbox. Even though I have set up a PHP and ajax call function on my page, something seems to be goi ...

phpjqueryajaxmysqli

As soon as I hit the submit button on my website form, the URL is automatically refreshed with the information I provided

I am a beginner when it comes to forms and recently copied and pasted this login snippet code: <div class="login-form-1"> <form id="login-form" class="text-left"> <div class="main-login-form"> <div class="login-group"> ...

javascriptjqueryhtmlcss

Convert the existing jQuery function to Angular 9 syntax

I have just started learning Angular and am finding it challenging to rewrite a jQuery code that I use for loading the "classycountdown" script. Below is the jQuery function that I need to convert: $(document).ready(function() { var remainingSec = $(& ...

javascriptjqueryangular

Leveraging jQuery event listeners within a Javascript class initialization

Recently delving into OOP in JavaScript, I've been revamping some of my old code to make it more reusable. Instead of leaving them as inline scripts, I decided to encapsulate them within JavaScript classes. Here is an example of one of my classes: ...

javascriptjqueryclassoopjquery-events

Resolving jQuery reference to an empty value in a textarea

I have been working on form validation to check for unfilled entries in my form, which includes inputs, textareas, and selects. While I was successful in validating the input fields, I encountered difficulties with the textarea (and haven't attempted ...

jquery

Why does the browser keep converting my single quotation marks to double, causing issues with my JSON in the data attribute?

This task should be straightforward, but I seem to be facing a roadblock. I am trying to insert some JSON data into an input's data attribute, but the quotes in the first key are causing issues by prematurely closing the attribute. Here is the code ...

javascriptjqueryhtmljson

Guide to making a leaf node with jstree version 3.0.0

The tree functionality seems to be functioning correctly, however, I am facing an issue with creating a leaf file. Although it is able to create a folder file, the creation of a leaf file seems to be problematic. Below is the code snippet that I am strugg ...

jqueryjstree

Utilizing media queries to customize the appearance of a jQuery accordion widget

Hello, I'm struggling with implementing a jQuery accordion for mobile platforms that destroys itself on larger screens. While my code is mostly working, I've encountered two issues: The accordion only gets destroyed when the window is resized ...

javascriptjqueryhtmlcssjquery-ui