Плавающее меню

Question

Плавающее меню

Рейтинг: 0Ответов: 1Опубликовано: 03.03.2015

Добрый день! Я новичок в программировании. Прошу помочь сделать плавающее меню (http://echo.md). Хочу, чтобы при скроллинге страницы вниз шапка (где меню и лого) уменьшалась вдвое и крепилась к верху броузера.

Все перепробовал, ничего не выходит. Знаю, что CSS грязный/неверный, я пытался хоть что-то прицепить. :)

Благодарю за ваше время!

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; }

css javascript html

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

Очень много таких вопросов уже было)

Для фиксирования при скролле можно вот так:

$(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'); // удаляем класс
    }
});

Разумеется, в CSS нужно написать стили для класса fixed, чтобы зафиксировать нужный вам блок.

UPD. Пример

Плавающее меню

Ответы