Fade in scroll on top

[Romchick]

Starting to jungle with JS / JQuery. Here is the problem:
I want the transparent menu on top to become not transparent. I found some ideas, this one is the shortest.

This is the style I want to change:
\#nav-topbar.nav-container {background: rgba(0,0,0,.5); box-shadow:none;
&.scrolled {background: rgb(255,255,255)}
}
<code></code>
with this:
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 200) {
$('header').addClass('scrolled');
} else {
$('header').removeClass('scrolled');
};
});
});
<code></code>
Very important to change straight #nav-topbar.nav-container. As I don’t understand not a thing of this, how to handle it?

PS The site

[Soronbe]

Use addClass and removeClass to add (and remove) a class to an element. Then proceed to use

.my-new-class {
/*css here*/
}

[Romchick]

Its hard to understand for me now.

What do I have to put in $(‘header’) to make it understand where to use it?

[Paulie_D]

Perhaps you could make a Codepen.io demo…just the relevant code though. no need to recreate the whole site.

It looks like you’re on the right track but your jQuery selector doesn’t seem to match the element in question.

[Romchick]

Its hard to giv the right code. Something always’s missing…
Here’s the code but header isnt fixed… dont know why…

[Paulie_D]

It’s not that hard..just trim away anything not related to the issue.

We don’t need the media queries etc.

[Romchick]

Like this?

But header is still isnt fixed… cant get it why…

[Paulie_D]

Dude…seriously!

We don’t need the menu, we don’t need the background image…just a header with a height…and the code that makes it & styles it.

EVERYTHING ELSE CAN GO.

If the header isn’t fixed..perhaps you haven’t applied position:fixed in your CSS.

[Romchick]

Let it pass. This is very hard structured template, that was chosen.

The problem is that when I delete even one class or id the whole header disappears.

But without knowing the php I cannot change a thing in this header, b’cuz every part in this structure is intertwined. Thats the problem. And I think I could do it wit JQ from above, but this template…. Sorry, for wasting your time. If someone else wants to help me, can give you access to site.

[Paulie_D]

See…not hard at all

http://codepen.io/Paulie-D/pen/wIoAz

[Romchick]

Thanks alot. But the thing is: its not working on my site.

And why its not working here and here

[Romchick]

Yep! Guys! That was JQuery. Don’t know why, native installed JQ site doesnt see this script, after connecting straight https://ajax.googleapis.com/… it became to work. too much expirience for two days. Thanks alot! This case is closed! See you in a while. 8)

[Author]

Posts