3

どうすれば次のことができますか：ページが狭い画面で開かれたとき、またはブラウザのウィンドウサイズが変更されたときに、位置を変更するためにdivが必要です。固定divは、ページを上下にスクロールしたときに同じ垂直位置に留まる必要がありますが、最大のdivから10px離れている必要もあります（小さいdivのコンテナー、写真を参照してください）。これで、ウィンドウのサイズを変更すると、固定divが右側のdivに表示されます。

だから問題は、ページを垂直にスクロールするときにこの固定divを同じ位置に保ち、常に右側のdivから10px離すにはどうすればよいですか？固定のCssクラスは次のとおりです。

.fixed{
    width:40px;
    height:40px;
    position:fixed;
    bottom:100px;
    left:100px;
    text-indent:-9999px;
}

実際、私は「トップに戻る」ボタンを実装しようとしているので、固定divはこのボタンであり、最大のdivはページのコンテンツです。

これが私が今持っているものです：

ここに画像の説明を入力してください

4

3 に答える 3

3

cssを次のように変更します。

.fixed{
    width:40px;
    height:40px;
    position:fixed;
    bottom:100px;
    left:50%;
    margin-left: -[(maincontainerwidth/2) + 50];
    text-indent:-9999px;
}
于 2012-12-19T17:35:27.423 に答える
2

私がそれをする2つの方法：

1）ウィンドウの幅を読み取り、CSSを変更するカスタムJavaScript

2）またはadapt.jsなどのライブラリを使用して.cssを検出して交換します

キーワード：レスポンシブウェブデザイン

ページウィンドウサイズに基づいてさまざまなcssファイルをロードするjavascriptライブラリであるadapt.jsを見てください。この手法は、モバイル画面とデスクトップ画面で異なるものを表示する場合に最適です。

あなたのシナリオでは、これも潜在的に機能します。

1）リファレンスadapt.js

<script src="/js/adapt.js" type="text/javascript></script>

2）構成

つまり、基本的に2つのビューがあります。

// Edit to suit your needs.
var ADAPT_CONFIG = {
  // Where is your CSS?
  path: 'assets/css/',

  // false = Only run once, when page first loads.
  // true = Change on window resize and page tilt.
  dynamic: true,

  // Optional callback... myCallback(i, width)
  callback: myCallback,

  // First range entry is the minimum.
  // Last range entry is the maximum.
  // Separate ranges by "to" keyword.
  range: [
    '0px    to 760px  = Narrow.css', // css for narrow views
    '760px  to 980px  = Narrow.css',
    '980px  to 1280px = Wide.css', // css for wide views
    '1280px to 1600px = Wide.css',
    '1600px to 1920px = Wide.css',
    '1940px to 2540px = Wide.css',
    '2540px           = Wide.css'
  ]
};

3）全体としては次のようになります

<html>
    <head>
    ...

    <script src="/js/adapt.js" type="text/javascript></script>
    <script type="text/javascript>
        // Edit to suit your needs.
        var ADAPT_CONFIG = {
          // Where is your CSS?
          path: 'assets/css/',

          // false = Only run once, when page first loads.
          // true = Change on window resize and page tilt.
          dynamic: true,

          // Optional callback... myCallback(i, width)
          callback: myCallback,

          // First range entry is the minimum.
          // Last range entry is the maximum.
          // Separate ranges by "to" keyword.
          range: [
            '0px    to 760px  = Narrow.css', // css for narrow views
            '760px  to 980px  = Narrow.css',
            '980px  to 1280px = Wide.css', // css for wide views
            '1280px to 1600px = Wide.css',
            '1600px to 1920px = Wide.css',
            '1940px to 2540px = Wide.css',
            '2540px           = Wide.css'
          ]
        };
    </script>
    ...
    </head>
    <body>
            ...
    </body>
</html>
于 2012-12-19T17:13:52.727 に答える
0

ラッパー！

これを制御する最良の方法は、ラッパーを使用することだと思いますdiv。だから、このようなものを持っています：

<div class="wrap">
    <!-- Contents -->
    <div class="fixed">
    </div>
</div>

次に、CSSを追加します。

.wrap {width: [fixed width]; position: relative;}
.fixed {left: -100px;}

ラッパー自体は嘘なので、ラッパーdivは必要ないと思います。この方法を使用すると、同じ位置に留まります。bodyrelativepositiondiv

于 2012-12-19T17:09:37.073 に答える