Good day! I am a newbie in programming.
Please help make a floating menu (http://echo.md ).
I want the cap with the scrolling down the cap (where the menu and logo) is halved and was attached to the top of the browser.
I tried everything, nothing comes out.
I know that CSS is dirty / wrong, I tried to attach at least something. 🙂
Thank you for your time!
HTML:
& lt; div & gt; & lt; script src = "/ js / floatingmenu.js" Type = "Text / JavaScript" & gt; & lt; / script & gt;
& lt; div id = "Header-One" class = "default" & gt;
& lt; div id = "brand" & gt;
& lt; div id = "logo" & gt; logo & lt; / div & gt;
& lt; div id = "logo2" & gt; logo & lt; / div & gt;
& lt; / div & gt;
& lt; div class = "Clear" & gt; & lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
JS:
$ (document) .ready (function () {
VAR $ Menu = $ ("# Header-One");
$ (Window) .Scroll (Function () {
if ($ (this) .scrolltop () & gt; 50 & amp; & amp; $ Menu.Hasclass ("Default")) {
$ Menu.RemoveClass ("Default"). AddClass ("Fixed");
$ ('# logo'). Fadeout (0, Function () {
$ ('# logo2'). Fadein ();
});
} ELSE if ($ (this) .scrolltop () & lt; = 50 & amp; & amp; $ Menu.Hasclass ("Fixed")) {
$ Menu.RemoveClass ("Fixed"). AddClass ("Default");
$ ('# logo2'). Fadeout (0, Function () {
$ ('# logo'). Fadein ();
});
}
});
});
CSS:
#Brand {
/ * block that serves as a wrapper for logo and contacts * /
Float: Left;
width: 30%; }
#logo {
Font-Size: 28px;
Color: #FFF; }
# logo2 {
Display: None;
/ * The block of contacts is initially hidden and will appear only when scrolling * /
Font-Size: 12px;
Color: #FFF; }
# HEADER-ONE {
width: 920px;
TEXT-TRANSFORM: UPPERCASE;
Text-Align: Center;
Line-Height: 50px;
Background: # 69C; }
# Header-one ul {
Float: Right;
Padding: 0;
margin: 0;
width: 70%; }
# HEADER-ONE LI {
Display: INLINE;
List-Style: None;
Margin: 5px 10px; }
# Header-One Li A {
Padding: 5px 10px;
Color: #FFF;
Text-Decoration: None; }
# HEADER-ONE LI A: HOVER {
Background: # 36c;
Color: # FF0; }
# Header-One.Default {
width: 920px; }
# Header-One.fixed {
Position: Fixed;
Top: 0;
left: 0;
width: 100%; } .clear {
Clear: Both; }
Answer 1, Authority 100%
There were already a lot of such questions)
For fixing when scrolling, you can like this:
$ (window) .scroll (function () {
VAR $ Block = $ ('# Block'); // ID caps
if ($ (window) .scrolltop () & gt; $ block.offset (). TOP) {// Here the idea is that the block is tied to the top, as soon as the "sticks" to the top of the browser window. Replace $ block.offset (). TOP for any value and it turns out that when you slippage to a larger number of pixails than indicated, add a class to the header.
$ block.addclass ('Fixed'); // Add the Fixed class. In styles pointing for it Position: Fixed, Height, and so on to make a fixed cap.
} else {
$ block.removeclass ('Fixed'); // Remove the class
}
});
Of course, in CSS you need to write styles for the Fixed class to fix the block you need.
upd. Example