5

これで髪を抜いています。左側の固定位置div（オウムと翻訳者）が下にスクロールするときにページをたどりたいWebページがあります。 http://www.cartoonizemypet.com/new/help/

私はなんとかこのツタンカーメンhttp://jqueryfordesigners.com/fixed-floating-elements/をたどり、完璧な効果だと思ったものを手に入れることができました！それから私は自分の携帯電話でそれを見てみました....私がズームインするとすぐに、爆破されたdivがテキストの上に移動しました！:(ブラウザウィンドウを縮小して右にスクロールすると、通常のブラウザへの影響を確認できます。

オウムが水平に動くのを防ぐ方法を知っている人はいますか？私は解決策を探し求めてきましたが、それは不可能に見え始めています。

関連するCSSは次のとおりです

#content {
    padding-top:20px;
    padding-bottom:713px;   /* Height of the footer element */
    width:888px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
}

#help-col1 {
    left:0;
    width:218px;
    position:absolute;
    height:500px;
}

#parrot-box {
    position:absolute;
    top:0;
    margin-top: 20px;
}

#parrot-box.fixed {
    position:fixed;
    top:0;
}

#help-col2 {
    width:634px;
    float:right;
}

SCRIPTとHTMLを確認するには、ページソース（http://www.cartoonizemypet.com/new/help/）を自由にチェックしてください。どんな助けでも大歓迎です。

4

3 に答える 3

3

オウムが「fixed」クラスを取得すると、オウム（＃help-col1内）の「left」値は0になります。これは、オウムが常にページの左側にアタッチされることを意味します...ウィンドウのサイズとそのスクロール方法。

あなたが求めているのは、ユーザーが水平方向ではなく垂直方向にスクロールしたときに、固定位置の要素のように動作することです。私の知る限り、これは不可能です。固定は固定です...xとy。

ただし、この問題を解決するためにjavascriptを使用することについて話しているいくつかの解決策（このようなもの）があります。ここでの理論は、ページが水平方向にスクロールされたときに小さなjavascriptがリッスンでき、スクロールされた場合は、それに応じてオウムを元の位置に戻します。

個人的には、cssメディアクエリを使用してモバイル固有のレイアウトを作成することを検討します。サイトのモバイルバージョンに特定のCSSを割り当てることができるので、ユーザーがズーム（または水平スクロール）する必要がまったくないことを願っています=）

幸運を！

于 2012-08-14T07:24:26.793 に答える
1

JSスクロールイベントリスナーが提案されていますが、それに依存するすべての実装は体系的に遅れています。メディアクエリを使用して、固定ポジショニングが適切かどうかを判断する方が幸運だと思います（つまり、ウィンドウ/デバイスの幅が十分に広い場合はOK、そうでない場合は別の動作に置き換えます）。

あなたは実際に狭い画面のためにオウムを上部に残し、いくつかの不動産を保存するだけでなく、古いモバイルSafariバージョンの正しく解釈できないことに対処することができposition:fixedます。より洗練されたアプローチを実装することもできますが、これは良い出発点になるはずです。試してみるには、ページで次のスクリプトを実行してください（コンソールだけで問題ありません）。

$('head').append('<style type="text/css">#parrot-box.fixed {position:absolute;}</style><style type="text/css" media="screen and (min-width: 982px)">#parrot-box.fixed {position:fixed !important;}</style>');

最初に元の#parrot-box.fixed宣言をオーバーライドし、次にウィンドウが少なくとも982px幅（ページラッパー幅）である場合は常にフロートスタイルを適用します。

于 2012-08-14T08:24:28.903 に答える
-1

誰もが心配しないで、私の夫はこの仕事をする別の方法を考え出しました！:)

ページと一緒にオウムを動かすのではなく、回答div内に複数のバージョンのオウムを配置します。そうすれば、ユーザーが回答をクリックすると、その回答が開き、オウムがその横に表示されます。

当初の計画ではありませんでしたが、この新しい方法をさらに見栄えよくすることができると思います。

とにかく助けてくれてありがとう！:)

于 2012-08-18T00:55:22.310 に答える