6

私はdivを持っています、このようなもの

  #footer
   {   position:fixed;
       left:40px;
       top:0px; 
   }

縦または横にスクロールすると位置が固定されます。しかし、ユーザーがスクロールバーを垂直方向にスクロールするときにdivを固定したいのですが、ユーザーがスクロールバーを水平方向にスクロールするときにdivを変更する必要があります。

いくつかのフォーラムや投稿を見たことがありますが、ほとんどの場合、jqueryスクリプトを見つけました。CSSでそれを行う方法があるかどうか知りたいですか？

この投稿を読んだのですが、 jquery スクリプトを理解していませんでした。cssでそれを行う方法またはjqueryでそれを行うより良い方法を教えてください。ありがとう

4

4 に答える 4

6

CSS / HTMLだけでは、この「見栄え」を良くすることは不可能のようです。Ruupまたは一方向のみの固定位置から述べたように、JSの上に重ねることは良いオプションです。

幸いなことに、私はそれをどうにかして動作させる方法を見つけました（それほど美しくはありません）：http： //jsfiddle.net/MKEbW/5/

HTML（bodyタグ内）：

<div id="simulated-html">
    <div id="footer">
        <span>
            <!-- Footer text here -->
        </span>
    </div>
    <div id="simulated-body">
        <!-- Your website here -->
    </div>
</div>

CSS：

* { margin:0; padding:0; }

html {
    font: 12px/1.5em Georgia;
}
p { padding: 5px; }

html, body {
    height: 100%;
    overflow: hidden; /* hide scrollbars, we create our own */
}

#simulated-html {
    background: orange;
    overflow-x: scroll; /* force horizontal scrollbars (optional) */
    overflow-y: hidden; /* hide. we use the #simulated-body for it. */
    position: relative; /* to align #footer on #simulated-html */
    height: 100%;
}

#simulated-body {
    overflow-y: scroll; /* force vertical scrollbars (optional) */
    overflow-x: hidden; /* hide. we use the #simulated-html for it. */
    height: 100%;
    background: #eee;

    /* use as a container */
    width: 450px;
    margin: 0 auto;
}

#footer {
    position: absolute;
    bottom: 0px; /* vertical align it to #simulated-html */
    width: 100%;
    background: red;
    z-index: 99; /* always show footer */
    color: white;
}
#footer span {
    width: 450px;
    margin: 0 auto;
    background: green;
    display: block;
}

browserlab.adobe.comでテストした、IE7+および最新のブラウザーで動作するようです。

Chrome 18のスクロールバー、小さくて広いビューポートでテストされています。

機能しないブラウザやJSの回避策のフォールバックをお勧めします。

于 2012-06-05T00:43:27.513 に答える
1

リンクされた投稿はまさにあなたが必要とするものです。正確なスクリプトをコピーできます。

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

div cssは次のようになります（トップ0px：Pがある場合は、おそらくフッターではありませんが、問題ありません）

#footer
{  position:fixed;
   left:40px;
   top:0px; 
}

jqueryスクリプトをスクロールすると、left（x）座標がウィンドウのscrollLeftと同じ値に調整されます。

于 2012-06-04T20:38:40.180 に答える
1

前のコードに小さな修正があります。

固定divを水平方向に移動するための変更されたjavascriptコード

$(window).scroll(function(){
  $('#footer').css('left',-$(window).scrollLeft());
});
于 2012-10-18T15:59:50.993 に答える
0

横軸はどのように変化する必要がありますか？このコードの現在の状態では、常に左から40pxのままになります。ウィンドウのサイズに対して左マージンの位置を変更するには、パーセンテージと負のマージンを使用する必要があります。たとえば、固定divを中央に配置するには：

     #centered { 
          height: 350px;
          top: 0;  
          position: fixed;
          width: 1024px; 
          left: 50%; 
          margin-left: -512px; 
          z-index: 9999;
          }

負のマージンはdivの幅の半分でなければならないことに注意してください。中央から40ピクセル左に配置したい場合は、マージン左にさらに40ピクセルを追加します。

于 2012-06-04T20:34:39.137 に答える