Jquery add CSS value not working

Question

I've got some code that adds a CSS class to an element when the user scrolls to a certain amount, to make a sticky menu bar (The distance to scroll is dependant on screen resolution so is calculated within the JQuery) - I want to add a CSS value to this class (.header_scroll) so that it changes the height of the element the class is being assigned to on scroll, to the height of another dynamic height element (#nav_wrap)

jQuery("document").ready(function($){

        //Find the height of the header
        var headHeight = $("#header_wrap");
        var headerHeight = headHeight.innerHeight();

        //Find the height of the nav bar
        var menuFindHeight = $("#nav_wrap");
        var menuHeight = menuFindHeight.innerHeight();

        //Add value to class
        $(".header_scroll").css({"height": menuHeight});

        //Add class on scroll
        var nav = $('#header_wrap');

        $(window).scroll(function () {
            if ($(this).scrollTop() > ( headerHeight - menuHeight )) {
                nav.addClass("header_scroll");
            } else {
                nav.removeClass("header_scroll");
            }
        });

    });`

The code to add the class is working fine, however no matter what variations on this I try, the:

//Add value to class
        $(".header_scroll").css({"height": menuHeight});

Section will just not do anything at all. Looking in inspect element in chrome I'd expect to see

height: xxxpx;

appear in .header_scroll but it isn't

show your CSS for the .header_scroll, and if put a code snippet would be nice — Guilherme
– Guilherme, Commented Aug 20, 2015 at 14:20
Well I am betting that header_scroll does not exist until you scroll so how would it add the height to the element? — epascarello
– epascarello, Commented Aug 20, 2015 at 14:23

MrUpsidown · Accepted Answer · 2015-08-20 14:21:02Z

2

$(".header_scroll").css({"height": 200});

This will not add a height property to your CSS rule. Instead it will add style="height: 200px;" to the .header_scroll HTML element(s).

So you would end up with an HTML element like:

<div class="header_scroll" style="height: 200px;"></div>

answered Aug 20, 2015 at 14:21

MrUpsidown

22.5k15 gold badges83 silver badges143 bronze badges

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

Comments

Radonirina Maminiaina · Accepted Answer · 2015-08-20 14:27:20Z

0

Maybe you can't get the right value of headerHeight, that why it doesn't appear in your inspect tools.

Check that you get the correct height of your #headHeight element and try this:

$(".header_scroll").height(headerHeight);

edited Aug 20, 2015 at 14:27

answered Aug 20, 2015 at 14:18

Radonirina Maminiaina

7,0144 gold badges35 silver badges63 bronze badges

Collectives™ on Stack Overflow

Jquery add CSS value not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related