How to apply css code style when css class is added by JS

Question

What's i'm trying to do is : i have a top fixed bar, that when scroll down it has a smaller height and the menu is ok, however the image logo scales under the black bar with about 5 px;

I thought to resolve this by: adding margin-top:30px to the logo, and i want when the class mk that changes the height of the bar to smaller one on scrolling, to make changes to the logo class to be margin-top:0 is this possible by JS?

Sounds like a quick fix. Why not post your code so we can look at your css and html? :) — nkmol
– nkmol, Commented Dec 2, 2013 at 13:36
i don't know exactly what to post it's just a bar with menu and logo on the left, i just need a css style to be added to a class when the 4th parent has mk class... — Liza
– Liza, Commented Dec 2, 2013 at 13:41
Well just a bar with a menu and a logo on the left does not say much to "outsiders". There is no global formula of creating a menu, it can be created in all kind of ways. You can just post the css and html of that menu if you're not certain what to post. Also a jsFiddle of your problem is appreciated here :) — nkmol
– nkmol, Commented Dec 2, 2013 at 13:43
@nkmol , it's like here: artbees.net/themes/jupiter-demo , the above bar on scrolling changes width and so the logo, my logo does not, the menu is working but the logo not :( — Liza
– Liza, Commented Dec 3, 2013 at 7:49

alicoding · Accepted Answer · 2013-12-02 13:47:14Z

2

In your logo maybe you can do something like?

element.style.marginTop="0px"

Basically what you want to do is that when you reach the logic of scrolling in your JavaScript code you want to do

var element = document.getElementId("IdOfYourElementThatyouWantToApply");

Then you apply the style like the code above.

edited Dec 2, 2013 at 13:47

answered Dec 2, 2013 at 13:36

alicoding

213 bronze badges

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

2 Comments

Liza Over a year ago

i want this to be done when the 4th parent above has the mk class then change the margin-top to 0, because this class is added when scroll down...

Liza Over a year ago

it's like here: artbees.net/themes/jupiter-demo , the above bar on scrolling changes width and so the logo, my logo does not, the menu is working but the logo not :(

Shryme · Accepted Answer · 2013-12-02 13:33:56Z

0

You can do this in javascript:

yourObject.style.marginTop="0px"

answered Dec 2, 2013 at 13:33

Shryme

1,5701 gold badge14 silver badges22 bronze badges

5 Comments

Liza Over a year ago

how to apply it exactly?

Shryme Over a year ago

In javascript, just replace "yourObjet" by the name of your object that you get with document.getElementById('yourObjectId'); then call style.marginTop="0px";

Liza Over a year ago

it's like here: artbees.net/themes/jupiter-demo , the above bar on scrolling changes width and so the logo, my logo does not, the menu is working but the logo not :(

Shryme Over a year ago

Then I think you need to use top, look at this: FIDDLE. I don't know about using it like your demo, but it can be a start!

Shryme Over a year ago

I found this site that could help you, using jquery and css3, i don't know about IE but it should run fine on chrome and firefox: How to Create a “Stay-On-Top” Menu with CSS3 and jQuery

user3037493 · Accepted Answer · 2013-12-02 15:53:48Z

0

In JQuery you can do:

$('#YourId').attr('style', 'margin-top:0px');

If you want to have the older style, just do something like that:

    var style = $('#YourId').attr('style');
style += " margin-top:0px;"
    $('#YourId').attr('style', style);

edited Dec 2, 2013 at 15:53

user3037493

3122 silver badges8 bronze badges

answered Dec 2, 2013 at 13:36

SushiBalboha

112 bronze badges

2 Comments

Liza Over a year ago

i want this to be done when the 4th parent above has the mk class then change the margin-top to 0, because this class is added when scroll down... not anytime

SushiBalboha Over a year ago

Yeah, and so what ? You can do it when you want, juste do something like that if ($('#Id4thParent').attr('class') == 'mk') { do what I said }

Collectives™ on Stack Overflow

How to apply css code style when css class is added by JS

3 Answers 3

2 Comments

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related