0

私は自分の問題の解決策を探し回って前半を解決しましたが、誰かが私を助けてくれることを望んでいる小さな未解決の問題が1つあります。私はhtmlとcssにかなり精通しており、非常に基本的なphpの奇妙な部分を利用することで知られていますが、javascript / jqueryはまったく新しいものであり、Webデザインに関しては非常にアマチュアです。私に優しくして、簡単な言葉で説明してください！

幅が960pxに固定されたウェブサイトを作成しようとしています。このウェブサイトは、より広いブラウザウィンドウでは中央に配置されます。このために私は次のCSSを使用しています：

#container {
 width:960px;
 margin:auto;
}

これは正常に機能しています。

このdivの上部に、ページの残りのコンテンツの上に浮かぶ固定の水平メニューが必要です。これは、幅が960ピクセルで、ビューポートの上部に接着されたままで、ユーザーが垂直方向にスクロールしたときに表示されます。下向き。

ウィンドウは960px幅のコンテナよりも幅が広いですが、これは簡単で、次のCSSは問題なく機能します。

#top {
 width:960px;
 position:fixed;
 top:0;
}

問題は、CSS position：fixedは常にビューポートに関連しているため、ウィンドウの幅が960px未満に縮小されると、ページの下部にスクロールバーが表示され、メインコンテンツ領域が右にスクロールすることです。上部の固定メニューはそうではありません。つまり、右側が失われ、アクセスできなくなります。

これに対する解決策を探しているときに、このスレッドを見つけました。このスレッドでは、次のjqueryコードでうまくいくと書かれています。

$(window).scroll(function () {
 $('#top').css('left', -($(window).scrollLeft()));
});

基本的に、これにより#top divのcssが変更され、ユーザーが右にスクロールすると左に移動します。これはエレガントでシンプル、そして私のニーズにぴったりのようです。これを機能させる方法と配置する場所を理解しようと少し悩んだ後、bodyタグ内に次のコードを追加しました。

<script src="jquery.js"></script>
<script type="text/javascript"> $(window).scroll(function () {
   $('#top').css('left', -($(window).scrollLeft()));
});
</script>

ここまでは順調ですね！ページが最初に読み込まれるとき、960pxより広いブラウザウィンドウでは、メニューは上部にあり、コンテナdiv内の中央にあり、メインコンテンツが上下にスクロールされても所定の位置に固定されたままです。次に、ウィンドウが960px未満に縮小され、水平スクロールバーが表示されると、メニューはメインコンテンツの横で右にスクロールします。完全！悲しいことに、もう1つ問題があります。

ページが狭い間はスクロールは正常に機能しますが、もう一度960ピクセル以上に拡大すると、上部のフローティングメニューは、メインコンテンツとともに中央に戻るのではなく、左側に留まります。これは、jqueryコードによって再度設定されたcss「left」プロパティがまだあるためです。これは私の素敵なレイアウトを壊し、メニューがメインコンテンツと一致しなくなったことを意味します。

どういうわけか、ブラウザウィンドウの幅が960ピクセルを超え、水平スクロールバーが消えたらすぐに、このcssのビットを本質的に削除する必要があります。

これを行うJavaScript/jqueryのようなものはありますか？私はこれらすべてに完全に慣れていません、そしてこれまでのところ検索は私をどこにも連れて行きませんでした.....

どんな助けや提案も大歓迎です！

4

2 に答える 2

0

jqueryに追加してみます

$(window).resize(function(){
    if ($(window).width() > 960) {
        $('#top').css('left', 'auto');
    } else {
        $('#top').css('left', -($(window).scrollLeft()));
    }
});

それは動作しますか？

これを使用して、左スクロールを検出することができます。

var lastScrollLeft = 0;
$(window).scroll(function() {
var documentScrollLeft = $(document).scrollLeft();
if (lastScrollLeft != documentScrollLeft) {
    //your code here
    $('#top').css('left', -($(window).scrollLeft()));

    lastScrollLeft = documentScrollLeft;
}
});​
于 2012-08-17T20:29:37.303 に答える
0

それを私が直した！わーい！朝まで待って、頭をすっきりさせるだけで何ができるかを示すだけです。メニューを左にスクロールする非常に単純な「if」ステートメントをコードに追加する必要がありました。

これが最終的な解決策です。tsdexter に大いに感謝します!

$(window).scroll(function () {
 if (($(window).scrollLeft())>0) {
  $('#top').css('left', -($(window).scrollLeft()));
 }
});

$(window).resize(function(){
 if ($(window).width() > 960) {
  $('#top').css('left', 'auto');
 }
});

今では Firefox で完璧に動作しているようです - まだ他のものを試していません! 指が交差....

于 2012-08-18T08:40:13.707 に答える