.addClass - How to call CSS from linked css?


Tags: jquery,css

Problem :

I have this piece of code and I have a simple question.

$(window).scroll(function() {
var y_scroll_pos = window.pageYOffset;
var scroll_pos_test = 150;             // set to whatever you want it to be

if(y_scroll_pos > scroll_pos_test) {
    $( "#cssmenu" ).addClass("extend");
} else if(y_scroll_pos < scroll_pos_test) {
    $( "#cssmenu" ).addClass("contract");
}
});

I have linked a CSS file ( via href="css/style.css") and I would like to use .extend and .contract from such file.

Is this possible?

Thank you.



Solution :

Yes. Just include the CSS file in your HTML.

<head>
   <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

You will also need to call .removeClass() to remove the extend and contract class when adding the other one.

See this jsFiddle


    CSS Howto..

    divs hide and show

    How to change my css code to fit the footer to the bottom of the page for any size of monitor?

    In Firebug, how to tell what is overriding a style?

    How to Insert Images inside DIV in this case

    How can I center a div

    How do I keep sibling divs from pushing each other down when I use “margin-top: 4px” on one of them?

    How to apply css style when using ng-print inAngular JS

    How to hide text behind image

    How can you hide the arrow that is displayed by default on the HTML5
    element in Chrome?

    How to make a div 100% width minus a certain amount?

    White space in between banner image and menu bar on site-only 1080px screen and lower. How to fix? [closed]

    How to move a span to a different position in a DIV

    CSS HTML - How to add more outer colour on the drop down menus and more than one word per drop down

    How do I create a class hierarcy in CSS for MVC4 Razor?

    How can I get rid of the the gap below absolutely positioned content?

    How to CSS the select field so that it occupy the entire cell of my table?

    How to create multicolored circle in css

    How to auto adjust margin to Auto center vertical & horizontal using jQuery and CSS margin

    HTML / CSS How to add image icon to input type=“button”?

    How to get the CSS style from Inspect Element

    How can I set -webkit-mask-box-image through javascript?

    How to use Bootstrap Glyphicons in Holder.js images

    In LESS, how to rewrite this CSS composition style?

    How to FadeIn a parent element and then it's child elements with a slight Delay (CSS Only)

    how to change html content text

    using css

    How to make images autoscale regardless of height (like on tumblr blogs)

    How to remove default CSS from TextField in flex?

    How to Dynamically Fit image in screen using css

    How can I change opacity of an image in css without disturbing the overwritten text's opacity

    How to apply different css margin-top to each children in a list