2009-07-28 7 views
1

通常は(解像度に依存する)要素がページの表示可能な領域の下部にないようにする必要があります。スクロールするとページの下にフローティングされます位置の効果への道:CSSで固定)。jquery - 要素をポイントに移動するにはどうすればいいですか?

しかし、私はその要素が停止し、それが何らかの意味を成していれば、自然にあった場所に到達するとそこに留まる必要があります!

理想的には、css/jsがサポートされていない場合、要素は「自然な」位置にも表示される必要があります。

これに対処するための最善の方法についてのご意見はありますか?誰でも既存のjQueryプラグインを知っていると知っていますか?

多くのおかげで、

ステュー

答えて

3

は、これは私がクライアントサイト上でこれを達成する方法である:(jQueryのを使用して)

はJavaScript:

if(!$.browser.msie || ($.browser.msie && $.browser.version > 6)){ 
    $('body').append('<div id="listener" rel="generated">&nbsp;</div>'); 
    $(window).scroll(function() { 
     if($('#listener').offset().top > 150){ 
      $('body:not(.fixmenu)').addClass('fixmenu'); 
     }else{ 
      $('body.fixmenu').removeClass('fixmenu'); 
     } 
    }); 
} 

CSS:

#listener{ 
    position: fixed; 
    top: 0; 
    right: 0; 
    height: 1px; 
    width: 1px; 
} 
#page #submenu{ 
    position: absolute; 
    top: 85px; 
    z-index: 3; 
} 
.fixmenu #submenu{ position: fixed; } 

技術:ページの右上隅に固定の位置付けで目に見えない "リスナー" divを動的に生成する。そのリスナーがページ上部から150ピクセル(またはここに任意の数値を挿入)以上の場合は、<body>に「fixmenu」クラスを追加します。ここから、CSSを使用してメニューの位置を絶対から固定に変更します。

IE6は固定配置をサポートしていないため、私は除外しました。

+0

偉大なもの、多くのありがとう! – stukerr

+0

注目すべき点:このコードを書いて以来、jQueryは$ .browserを廃止しました。代わりに$ .supportを調べることができます。 –

関連する問題