2012-01-28 10 views
1

私のページには、複数のアイテムを表示するためのサイドバーがあります。私のサイドバーはページの右側に固定されているので、ユーザーがページをスクロールするとサイドバーが動かない。サイドバーの一部の項目が部分的に表示され、ページの高さによって異なります。サイドバーのアイテムを非表示にすると、完全に表示されません。

私の質問:切断されたアイテムを完全に隠すことは可能ですか?

enter image description here

私は明らかだ場合、私は知らないのですか?

ありがとうございます。

答えて

0
var y = window.height; 
var items = $('items selector'); 


items.each(function(i){ 
    var that = $(this); 
    var height = that.height(); 
    var coord = that.offset(); 
    var itemBottom = coord.top+height; 
    if(y < itemBottom){ 
     that.hide(); 
    } 
}); 

、私はhaventはあり; tは、しかし、それをテストしていますが手掛かりを持っている場合、あなたは私に知らせていない場合はそれを動作させることができるでしょう。 また、どのコードについて説明する必要がある場合は、それについても説明します。 CSSで修正したり、レイアウトの考え方を重視したりする方が良いでしょう。

+0

私は何かを試してみましょう...最後の要素は点滅していますが、正しく隠されていません。理由はわかりません。ここにjsFiddleがあります:http://jsfiddle.net/MJ9VC/誰か見てもらえますか?テストするには、ブラウザのサイズを変更し、最後の要素が点滅している(隠れている/表示している)ことを確認します。ありがとう。 – Bronzato

+0

これは、css:visibilityプロパティを使用する方が良いでしょう。バグはそれから来ています。要素は高さと位置を持たないため、開始時の位置を検出して動的に隠すだけです。これまでは動的に両方を行っていました!または、CSS:visibilityプロパティをここから始めました。http://jsfiddle.net/MJ9VC/22/ – kidwon

+0

ありがとう!私はあなたのおかげでサイドバーを達成しました。 – Bronzato

0

余分なアイテムを表示したくない場合は、$(window).hight()であなたのページの高さを見つけて、他のオブジェクトに加えてこれから減らすことができます。サイドバーにあるアイテムにクラスがある場合は、これらの高さから最終的にカウントを計算し、余分なアイテムを非表示にすることができます。私は推測動作するはず

+0

ありがとうございました。これは私がそれを試して良い解決策かもしれません。 – Bronzato

0

計算$(ウィンドウ).height)()と1つの項目の高さと言う

セイウィンドウの高さはWHで、アイテムの高さは、その後

VARのn = Math.floor行い、1Hある(WH/iH)。

nは、カットなしでフィットできるアイテムの数です。

関連する問題