jQuery doesn't add class to element

Question

Simple scroll down -> change navbar sequence using jQuery.

$(document).ready(function () {
    'use strict';
     var c, currentScrollTop = 0,
     navbar = $('nav');
     $(window).scroll(function () {

        currentScrollTop = a;
        if (c > 650) {
          navbar.addClass("scrollUp");
          console.log("Showing navbar", c, navbar.hasClass("scrollUp"));

        } else if (c < 700) {
          navbar.removeClass("scrollUp");
        }
        c = currentScrollTop;
    });
}

Console log outputs current scroll and "false" where needed. Class just doesn't add up. Fyi I'm bad at jQuery and it's the only thing I have in my react app. scrollUp in CSS adds a background-color transition to nav, making it opaque. I noticed that sometimes it works, sometimes doesn't and I can't identify the problem. Haven't seen it working for a while now.

Bonus:

$("#toProjects").click(function() {
      $('html, body').animate({
          scrollTop: $("#projects").offset().top -75
      }, scrollSpeed);
      return false;
  });

This scrollTo function doesn't work as well.

HTML:

<head>
<script language="javascript" src="./jquery.js"></script>
</head>

CSS:

.navbar.scrollUp {
  background-color: #000000;
  transform: background-color 0s ease 0s;
}

Do you have some sample code hosted somewhere like codesandbox? — Mark
– Mark, Commented Apr 29, 2019 at 19:48
Does the nav element have navbar class already? You are accessing the element by "nav" but the css is applied to any element that has both .navbar and . scrollUp classes. — Nawed Khan
– Nawed Khan, Commented Apr 29, 2019 at 19:50
Also, is there a reason you're using jquery to select 'nav', but you refer to the class 'navbar' in your css? — Mark
– Mark, Commented Apr 29, 2019 at 19:50
currentScrollTop = a <-- what is a? I am sure the console is full of errors. Where is c being set? — epascarello
– epascarello, Commented Apr 29, 2019 at 20:03
@Mark It's live on rendemental.firebaseapp.com I used this code from some stackoverflow fella, who tried the same thing. It was working fine before and stopped just now. No idea why. — Martin Goncharov
– Martin Goncharov, Commented Apr 29, 2019 at 20:25

serverSentinel · Accepted Answer · 2019-04-30 20:09:07Z

1

You're setting currentScrollTop to a but a is never defined.

Edit: I see you have different code on your website than you've posted here.
You're not connecting to your navbar correctly. Try this instead.

var c, currentScrollTop = 0, navbar = $('#navbar');

$('nav') is looking for elements with the name 'nav', of which, none exist on your page. same as calling $('div') or document.querySelector('div').

$('#navbar') grabs the elements on your page where the id attribute is set to navbar.

This fixes the class not being added part but I think you'll need to work with the css a bit to actually see the affect take place.

edited Apr 30, 2019 at 20:09

answered Apr 29, 2019 at 19:59

serverSentinel

9946 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Martin Goncharov Over a year ago

Accidentally edited your post instead of replying. It's defined and it's not the problem

serverSentinel Over a year ago

If this solved the issue please accept it as the answer.

Martin Goncharov · Accepted Answer · 2019-05-08 15:16:25Z

0

The issue was solved by integrating jQuery code directly into ComponentDidMount() function inside React component. That way it re-engages and works fine

answered May 8, 2019 at 15:16

Martin Goncharov

1302 silver badges10 bronze badges

Collectives™ on Stack Overflow

jQuery doesn't add class to element

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related