.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..

    How to align divs side by side without one being slightly lower?

    How to add a sliding div to these CSS Message Bubbles?

    How can I determine the background image URL of a div via JavaScript?

    CSS: How to say .class:last-of-type [classes, not elements!] [duplicate]

    How to force CSS to be displayed on empty element following whitespace

    How to align a picture,name and the post with css like facebook does?

    How To Avoid Certain CSS coding/commands From Overriding Existing Customisations

    How do I make this CSS work to have semi-transparent border?

    How to set auto width for the fixed child div, when parent div change width?

    How to fill vertical spaces between tiles in a grid system (Using CSS)

    How to emulate window title bar in CSS/HTML

    How to add two class styles to anchor tag

    CSS: show triangles in a row

    How do I get the slide in as you scroll down (CSS Trick) technique to work in Safari?

    How to concatenate and minify multiple CSS and JavaScript files with Grunt.js (0.3.x)

    How to debug CSS when using GWT

    How do I integrate a jQuery script in to my html file?

    How can I make the first letter push itself into the paragraph like a newspaper style

    How to Work Jquery Rating Stars Using in Java Application?

    How to align horizontally list if there is a sublist css

    How to COLOR lower-roman ordered list style in html with just css?

    How can I change the color of this text?

    knockout.js how to bind dynamic css

    How to make a moving dashed border with CSS?

    how to print 60 degree rotated watermark in HTML CSS

    How to apply remaining width to a div in the middle of 2 other divs

    how to override the ice:commandLink css

    How to style in IE6 CSS?

    How to hide a column in a DataGrid?

    How to add a CSS specifc for Google Chrome? [duplicate]