メニューヘッダーのようにGmailを構築する方法

どのように私はGmailのメニューのような固定メニューを構築することができます。私はCSSを試したが、divは途中にとどまり、Gmailのメニューがスクロールのように表示されない。メニューヘッダーのようにGmailを構築する方法

open in large image gmail menu scroll effect

私は次の、CSSプロパティを使用してみましたが、いくつかのサンプルコード（ない実際のコード）である：

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

出典

2011-09-08 Basit

位置固定のみではこの効果を得るには不十分です。また、position:fixedはIE7以下では動作しませんので、おそらくフォールバックが必要です。

あなたがページをどのくらいスクロールダウンしたかに基づいて要素の位置を動的に変更するには、javascript（jQueryを使用すると簡単です）を使用する必要があります。 .scrollTop()

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

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

出典

2011-09-08 23:24:31 smdrager

あなたはscrollTopスプライトをチェックして、位置を設定するためにJavaScriptを使用する必要があります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'; 
     } 
    }

出典

2011-09-08 23:24:22

良いし、このためにjQueryのプラグインを使用して簡単に

ルックはここWaypoints

であるあなたは、実施例を見ることができます：
http://imakewebthings.github.com/jquery-waypoints/sticky-elements/

出典

2011-09-08 23:33:14 herkulano

あなたが見ているのはこれかもしれないまたは http://blog.geotitles.com/2011/10/creating-top-fixed-menu-bar-with-css3-buttons-found-in-gmail/

出典

2011-10-26 18:39:00