Check if a class doesn't exist on a page

Question

I'm trying to check if the div .full-screen doesn't exist on a page, is this the right way to do it?

if (!$(".full-screen").length) {

    $(window).scroll(function() {
        if ($(this).scrollTop() < 50) { // this refers to window
            $(".header-container").addClass('transparent-menu');
        } else {
            $(".header-container").removeClass('transparent-menu');  
        }
    }); 

}

The inner function runs regardless even though I know the class doesn't exist on the page.

This code looks fine, please check if you have this class enabled or not. — user923679
– user923679, Commented Sep 5, 2017 at 15:25
This might be happening because the class existed initially and the window scroll logic got bound at that time. You also have to unbind it when the class is missing — Abhi
– Abhi, Commented Sep 5, 2017 at 15:27

Hossein Oraee · Accepted Answer · 2017-09-05 16:07:45Z

2

if you want your inner function run when class Not Found in your code , you must use

if (!$(".full-screen").length){inner functions}

if you want your inner function run when class Found in your code , you must use

if ($(".full-screen").length){inner functions}

answered Sep 5, 2017 at 16:07

Hossein Oraee

2291 silver badge5 bronze badges

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

1 Comment

Rob Over a year ago

Although that's the same as my original code, it worked. I must've had something else clashing. I can't delete the question so I'll just accept this as it's correct

Abhi · Accepted Answer · 2017-09-05 15:30:16Z

Considering a scenario that the class existed and your logic got bound with window scroll event, but when the class is missing, it also needs to unbind, so try like:

if (!$(".full-screen").length) {
  $(window).on("scroll", function() {
    if ($(this).scrollTop() < 50) { // this refers to window
        $(".header-container").addClass('transparent-menu');
    } else {
        $(".header-container").removeClass('transparent-menu');  
    }
  }); 

} else {
    $(window).off("scroll");
}

SilverSurfer · Accepted Answer · 2017-09-05 15:35:50Z

0

You can try with hasClass() method over the Document:

if (!$(document).hasClass(".full-screen")) {

    $(window).scroll(function() {
        if ($(this).scrollTop() < 50) { // this refers to window
            $(".header-container").addClass('transparent-menu');
        } else {
            $(".header-container").removeClass('transparent-menu');  
        }
    }); 

}

answered Sep 5, 2017 at 15:35

SilverSurfer

4,3647 gold badges27 silver badges56 bronze badges

1 Comment

t.niese Over a year ago

hasClass(".full-screen") will check if the element has the class .full-screen and not if it has the class full-screen. Beside that this would not do what the OP is asking.

Collectives™ on Stack Overflow

Check if a class doesn't exist on a page

3 Answers 3

1 Comment

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Related