Change CSS of One Element Based on Class of Another Element

JavaScript
1

I’m using this code to change the css of <header> if the .butmore link is active. If .butmore is active, then I want to change the position of <header> to fixed. But the <header> CSS is not changing once .butmore is active. The inline css doesn’t change at all:

By default, <header> is set to fixed, but this needs to change once .butmore has a class of active.

if(jQuery(".butmore").click(function () {
  if (jQuery(this).hasClass("active")) {
    jQuery("header").css("position","relative");
  } else {
    jQuery("header").css("position","fixed");
  }
}

<header id="masthead" class="site-header container-fluid" role="banner">
<p>content here</p>
</header>

<div class="col-sm-3 accntmenu">
                        <a class="butmore">Log In</a> <a class="butmore2">Sign Up</a>
</div>

Is my code not any good? I don’t get any errors when I test it in my browser’s console.

2

Don’t you mean:

jQuery (".butmore").

Why are you saying ‘if’ ? Either its clicked or its not.

Simply set/remove a remove a class on the header at the same time you set .active on the .butmore and then use css.

.header-fixed {position:fixed}

It is best to use css for the css change as it is likely that as you are changing the header from fixed to relative then you will need to change a number of other properties on the header (e.g. width for a start will need to be 100% and of course the co-ordinates should be defined ) and maybe changes on other elements to compensate for the now fixed header. It may indeed be better to add a class to the body tag so that you can control any other element on the page at the same time using a new class on the body.

Is this question a continuation of your other thread?

3

The reason why I’m saying ‘if’ is because it’s conditional. If .butmore has a class of active after it is clicked, then change <header> to position:relative. Otherwise it is position:fixed.

The styling is already done whether the header will be fixed or relative, although I suppose I could just add a class in <header> and keep the CSS in the stylesheet.

As for the question being a continuation, I figured this would be considered a separate issue and added it here but was too late to edit my last post at the time.

4

No the click of the button is not conditional! You either click it or you don’t.

You want the condition once the button has been clicked.

Therefore you need a straightforward click handler as I showed you above. Once the button is clicked then you detect the class as you already have done.

e.g.

jQuery(".butmore").click(function () {
   if (jQuery(this).hasClass("active")) {
    jQuery("header").css("position","relative");
   } else {
    jQuery("header").css("position","fixed");
  }
});

But as I pointed out you would be better doing this by adding classes with js to style the elements rather than injecting css directly.

Is it? I have to guess as you didn’t show it.

A fixed element needs a width and top left positions and probably z-index greather than other elements on the page. A relative element needs none of those. A fixed header element requires some top padding or margin to the first element on the page otherwise you will never ever see it as it will be behind the fixed element.

1 Like
5

Okay, PaulOB. I’ve made some modifications:

jQuery(function() {
    jQuery(".butmore").on("click", function(){
        jQuery(this).toggleClass('active');
        jQuery("header.site-header").toggleClass('fl', function() {
            jQuery(".site-content").toggleClass('nopad');
        });
        jQuery( ".top" ).slideToggle( "fast", function() {
            // Animation complete.
        });
    });
    jQuery(".butmore2").on("click", function(){
        jQuery(this).toggleClass('active');
        jQuery("header.site-header").toggleClass('fl', function() {
            jQuery(".site-content").toggleClass('nopad');
        });
        jQuery( ".top2" ).slideToggle( "fast", function() {
            // Animation complete.
        });
    });
});

So far everything is working great!

Thank you for all your help!

P.S. Is there any way to compress this code? Does it seem rather long for the functionality I want?

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.