Good day! I am new to programming. Please help make the floating menu ( http://echo.md ). When you scroll down the page, I want the header (where the menu and logo) are halved and attached to the top of the browser.

I tried everything, nothing comes out. I know that CSS is dirty / incorrect, I tried to attach at least something. :)

Thank you for your time!

HTML:

<div><script src="/js/floatingmenu.js" type="text/javascript"></script> <div id="header-one" class="default"> <div id="brand"> <div id="logo">Logo</div> <div id="logo2">Logo</div> </div> <div class="clear"></div> </div> </div>

Js:

 $(document).ready(function () { var $menu = $("#header-one"); $(window).scroll(function () { if ($(this).scrollTop() > 50 && $menu.hasClass("default")) { $menu.removeClass("default").addClass("fixed"); $('#logo').fadeOut(0, function () { $('#logo2').fadeIn(); }); } else if ($(this).scrollTop() <= 50 && $menu.hasClass("fixed")) { $menu.removeClass("fixed").addClass("default"); $('#logo2').fadeOut(0, function () { $('#logo').fadeIn(); }); } }); });

CSS:

  #brand { /* блок, который служит оберткой для логотипа и контактов */ float:left; width:30%; } #logo { font-size:28px; color:#fff; } #logo2 { display:none; /* блок контактов изначально скрыт и появится только при прокрутке */ 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; }

    2 answers 2

    A lot of such questions have already been)

    For fixing with scrolling you can like this:

     $(window).scroll(function() { var $block = $('#block'); // ID шапки if($(window).scrollTop() > $block.offset().top) { // Тут идея в том, что блок привязывается к верху, как только "прилипает" к верху окна браузера. Замените $block.offset().top на любое значение и получится, что когда вы проскроллили на большее кол-во пиксейлей, чем указали, добавиться класс к шапке. $block.addClass('fixed'); // Добавляем класс fixed. В стилях указываем для него position:fixed, height и прочее, чтобы сделать шапку фиксированной. } else { $block.removeClass('fixed'); // удаляем класс } });

    Of course, in CSS you need to write styles for the class fixed to fix the block you need.

    UPD. Example

    • Thank you for such a prompt response. I tried both options. It doesn’t work for me ... I’m trying to link HTML and JS: <script type = "text / javascript"> </ script> <script src = "js / floatingmenu.js"> </ script> Is that correct? He does not tie anything at all to the top, he has correctly indicated the folder and file. Already so much time killed it, although they write that just ... But I'm not catching up. Help me please! - saha9
    • <script type = "text / javascript" src = "js / floatingmenu.js"> </ script> Learn HTML and CSS for a start)) A couple of minutes, comment my code - inferusvv 1515
    • And ... Added a simple example - inferusvv
    • An example helped a lot! Thank you very much! But you have a smaller heading, but I don’t ... (jQuery 2.1.3 costs). Code as two drops of water *. I can not understand what's the matter)) - saha9
    • All corrected. :) Tell me, please, why the cap does not decrease, as in your example? - saha9

    http://jsfiddle.net/4kwkjmd0/

    • Thank you for such a prompt response. I tried both options. It doesn’t work for me ... I’m trying to link HTML and JS: <script type = "text / javascript"> </ script> <script src = "js / floatingmenu.js"> </ script> Is that correct? He does not tie anything at all to the top, he has correctly indicated the folder and file. Already so much time killed it, although they write that just ... But I'm not catching up. Help me please! - saha9
    • Maybe you didn’t connect the jquery.page2page.ru/index.php5/Connect_jQuery library - soledar10
    • Added, 2.1.3 ... - saha9
    • Is there a link to the page? - soledar10
    • echo.md Now I look ... there is a hat only in Mozille))) - saha9