Conditional Jquery class toggle

Question

What I'm trying to do is basically, I have a nav bar with a logo in it. When a specific link with an ID of #theMenu is clicked a class of "moveMainLogo" should be added to the logo image and a class of "open" should be added to the div with class "navContainer".

BUT if the user scrolls down at all, I'd like the the "moveMainLogo" class added straight away and then if #theMenu is clicked the only thing that then happens is that .open class is added to the div with class "navContainer".

Then if the user scrolls back to the top of the page it reverts back to the original behavious or adding and removing both classes when #theMenu is clicked.

So I think I'm essentially trying to do this...

IF (distance to top is greater than 0)

apply class A to Element A

When Element B is clicked, apply class B to Element B

ELSE

When Element B is clicked, apply class B to Element B AND apply class A to Element A

This is the code I've tried so far, which kind of works as I wanted, the problem being that it seems to toggle the classes not only when the distance the user has scrolled is greater than 0 but EVERY time the user scrolls any amount wherever they are on the page.

        window.onscroll = function() {myFunction()};
        function myFunction() {
            if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) {
                $(".mainLogo").toggleClass("moveMainLogo");
                $("#theMenu").click(function () {
                    $("#animateMenu").toggleClass("hamburger-slim-clicked");
                    $(".navContainer").toggleClass("open");
                });
            } else {
                $("#theMenu").click(function () {
                    $("#animateMenu").toggleClass("hamburger-slim-clicked");
                    $(".navContainer").toggleClass("open");
                });
                $("#theMenu").click(function () {
                    $(".mainLogo").toggleClass("moveMainLogo");
                });
            }
        }

EDIT:

Fiddle: https://jsfiddle.net/2h3x0uam/1/

Before the user scrolls, if they click menu, movemainlogo class should apply. If they close the menu, the movemainLogo class should be removed.

If they scroll, the movemainmenu class should apply. If they open the menu after scrolling, movemainlogo class should remain applied. If they scroll back to the top, movemainlogo class should be removed.

Why don't you use addClass and removeClass instead of toggle? You could also check if the class exists before attempting to do either. — Cody Geisler
– Cody Geisler, Commented Mar 13, 2017 at 14:00
You could create a fiddle with your scenario, would be helpful. — DontVoteMeDown
– DontVoteMeDown, Commented Mar 13, 2017 at 14:04
jsfiddle.net/2h3x0uam This is what I have so far, the problem is that if the user doesn't scroll but opens the menu, the moveMainLogoClass applies but then when closing the menu, the class doesn't unapply. I don't know how to fix that without changing the behaviour on scroll, thats the only thing I need changed. — Fazy
– Fazy, Commented Mar 13, 2017 at 14:28

DontVoteMeDown · Accepted Answer · 2017-03-13 14:52:42Z

2

You should not set all those events in the scroll event. There you only add "IF (distance to top is greater than 0) apply class A to Element A" part.

The rest you have to add to the document.ready or something:

$(window).on("scroll", function() {
  if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) {
    $("#ElementA").addClass("classA");
  }
  else {
    $("#ElementA").removeClass("classA");
  }
});

$("#ElementB").on("click", function() {
    $(this).addClass("classB");
    $("#ElementA").addClass("classA");
});

Demo.

I hope I get you right, check out the demo.

Final result here.

edited Mar 13, 2017 at 14:52

answered Mar 13, 2017 at 14:03

DontVoteMeDown

21.5k10 gold badges72 silver badges113 bronze badges

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

7 Comments

Fazy Over a year ago

Thanks, I've added a JSFiddle to show what I have so far and hopefully make the issue clearer.

DontVoteMeDown Over a year ago

@Fazy nice! But your demo isn't functional. There is nothing to click and the target elements, as well their classes, are not there too. Try making your demo more closer to your real scenario as possible.

Fazy Over a year ago

Sorry dude, that doesn't seem to be the latest version, try this one... jsfiddle.net/2h3x0uam/3

Fazy Over a year ago

Although, I just realised, if you scroll down and then open the menu, it removes the moveMainLogo class, so it's actually fixed the main issue I ahd but added another. :(

Fazy Over a year ago

No idea how to check but your comment got something to click in my head and I swapped if (document.body.scrollTop == 0) { $(".mainLogo").toggleClass("moveMainLogo"); } to... if (document.documentElement.scrollTop == 0) { $(".mainLogo").toggleClass("moveMainLogo"); } and it works great, thanks again!

|

necilAlbayrak · Accepted Answer · 2017-03-13 14:00:08Z

0

Since you are using toggle it is natural to toggle class everytime user scrolls. instead you should use a flag variable which makes this events only once until it resets. something like

var flag = true;
if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0 && flag) {
  //do it
  flag = false;
}else{
  //do else
  flag = true;
}

answered Mar 13, 2017 at 14:00

necilAlbayrak

8046 silver badges9 bronze badges

Comments

funcoding · Accepted Answer · 2017-03-13 14:20:35Z

The code can be simplified to this:

var cond = (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0);

$(".mainLogo").toggleClass("moveMainLogo", cond);
$("#theMenu").click(function () {
    $("#animateMenu").toggleClass("hamburger-slim-clicked", cond);
    $(".navContainer").toggleClass("open", cond);
});

According to Jquery documentation:

.toggleClass( function [, state ] )
function
Type: Function( Integer index, String className, Boolean state ) => String
A function that returns class names to be toggled in the class attribute of each element in the matched set. Receives the index position of the element in the set, the old class value, and the state as arguments.
state
Type: Boolean
A boolean value to determine whether the class should be added or removed.

Collectives™ on Stack Overflow

Conditional Jquery class toggle

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related