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

Answer 2

http://jsfiddle.net/4kwkjmd0/