как построить Gmail как заголовок меню

Question

Как я могу построить фиксированное меню, как меню Gmail. я пробовал css, но div остается посередине, он не появляется как меню gmail при прокрутке.

открыть в большом изображении

Я попытался использовать свойство css, ниже приведен пример кода (не настоящий код):

.menu {
    position:fixed;
    height: 36px;
    background-color:#fff;
}

Answer 1

Хороший и простой в использовании плагин jQuery для этого: Путевые точки

Здесь вы можете увидеть рабочий пример:
http://imakewebthings.github.com/jquery-waypoints/sticky-elements/

Answer 2

Вам нужно использовать javascript, чтобы проверить scrollTop и установить фиксированное положение вашего меню, если scrollTop больше высоты вашего заголовка.

    function getScrollTop() {
        if(typeof pageYOffset!= 'undefined') {
            //most browsers
            return pageYOffset;
        }
        else {
            var b = document.body; //IE 'quirks'
            var d = document.documentElement; //IE with doctype
            d = (d.clientHeight) ? d : b;
            return d.scrollTop;
        }
    }

    function onScroll() {
        var menu = document.getElementById('divMyMenu');
        var headerAndNavHeight = document.getElementById('divHeader').clientHeight
            + document.getElementById('tsMain').clientHeight;

        if (getScrollTop() < headerAndNavHeight) {
            menu.style.top = headerAndNavHeight + 'px';
            menu.style.position = 'absolute';
        }
        else {
            menu.style.top = '0px';
            menu.style.position = 'fixed';
        }
    }

Answer 3

Положение, зафиксированное само по себе, недостаточно для достижения этого эффекта.Кроме того, position:fixed не работает в IE7 или ниже, так что вы, вероятно, захотите иметь запасной вариант.

Вам нужно использовать javascript (jQuery облегчает) для динамического изменения положения элемента на основекак далеко вы прокрутите страницу вниз.

Просмотр .scrollTop()

http://api.jquery.com/scrollTop/

var scrollTop = $(window).scrollTop();

Answer 4

Вот очень простой трюк для реализации вашего требования, объясненный примером и ссылкой для скачивания. http://itswadesh.wordpress.com/2012/02/24/google-like-top-bar-with-drop-down-menu-using-html-css-and-jquery/

Answer 5

Может быть, это то, что вы ищете http://blog.geotitles.com/2011/10/creating-top-fixed-menu-bar-with-css3-buttons-found-in-gmail/