0

私は C# .NET 開発者ですが、質問をする前に十分な努力を払っていますが、CSS は苦手です。基本的な jQuery、CSS、および HTML テーブル (はい、テーブルは知っています) を使用して、以前はフラッシュにあった唯一の写真ポートフォリオを構築しています。私が抱えている問題は、iPhone や Android などのモバイル デバイスで Web サイトを表示するときです。私の場合は、Galaxy S3 のスクリーン ショットです。ユーザーが写真を拡大すると、固定したメニューが上に移動します。写真の。

編集:メニューが写真の同じ場所に「浮かび」、ユーザーがスクロールするとスクロールバーに追従し、ユーザーが写真の最後までスクロールするとアクセスできるように、固定位置を使用しています。CSS を最初の応答に更新しましたが、スクロールしてもメニューが画面に残りません。もともとこのメモを投稿に含める必要がありました。

ウェブサイトへのリンク: http://briangarson.com

スクリーンショット:

ユーザーがピンチしてズームイン - メニューが画像の上に浮かびます。

スクリーンショット 1 - 拡大

ズームインしていない:

スクリーンショット 1 - 拡大
(ソース: briangarson.com )

私が使用しているコード（おそらく私のウェブサイトでソースを表示する方が簡単です）が、ここに行きます

<style type="text/css">
body
{
    background-color: #FFFFFF;
}

.gallery
{
    height: 600px;
}

#content{
    margin-top: 50px;
}

#menu{
    margin-left: 15px;
    position: fixed;
}
table{
padding-top: 90px;
}
td{
    padding-left: 15px;
}
a{
color:#1A1A1A;
}
a.on{
    text-decoration: none;
}
</style>

そしてHTML 

<div id="content">
    <div id="menu">
        <img  src="http://briangarson.com/logo.gif"> <a id="navSkate" class="on" href="#">Skate</a> | <a id="navMusic" href="#">Music</a> | <a id="navFashion" href="#">Fashion</a> | <A target=_blank href="mailto:photo@briangarson.com">Info</a>
    </div>
    <table>
    <tr id="fashion">
      <td><img class="gallery" src="photos/352cassandra_aylmer.jpg"></td>
      <td><img class="gallery" src="photos/811for_web_low_res_texture_0141-editweb.jpg"></td>
      <td><img class="gallery" src="photos/78420061105031421_carolina_01_floor_srgb.jpg"></td>
      <td><img class="gallery" src="photos/91720061127164637_kat_salute_srgb_01.jpg"></td>
      <td><img class="gallery" src="photos/997val__1262555511_4af982f854_o.jpg"></td>
      <td><img class="gallery" src="photos/43620060531234234_geoff.jpg"></td>
      <td><img class="gallery" src="photos/918christine_dsc_8737.jpg"></td>
      <td><img class="gallery" src="photos/471debbie.jpg"></td>
      <td><img class="gallery" src="photos/158alison_dsc_0602-edit.jpg"></td>
      <td><img class="gallery" src="photos/95madelaine_bw.jpg"></td>
      <td><img class="gallery" src="photos/971gabrielle_v3_bordered.jpg"></td>
      <td><img class="gallery" src="photos/917ioanna_dsc_1937-edit.jpg"></td>
      <td><img class="gallery" src="photos/96520061106010418_carolina_couch_01_srgb.jpg"></td>
      <td><div style="display: block; width:100px;">&nbsp;</div></td>
    </tr>
    </table>
</div>
4

3 に答える 3

4

ほとんどの場合、私はそれを使用していないため、固定位置で問題が発生したことは一度もありません.モバイルブラウザはposition:fixed. 次のようにする必要があると思います->

#menu{
    margin-left: 15px
    position: absolute;
        top:50px;   
}

上記の目的は、 の寸法にバインドされていた場合と同じ、上部からの距離を維持することです<div id="content>。これで、スクロール イベントにバインドすることでこれを再現できます。

$(document).scroll(function(){
  $('#menu').css('top', '50px');
});

これがあなたが目指している効果だと思います。

于 2012-06-30T04:41:37.157 に答える
3

位置: 固定; 古いデスクトップ サイトが壊れる可能性があるため、モバイル デバイスでは正しく動作しません。私が認識している位置固定をサポートする唯一のモバイル ブラウザーは、iOS 5 以降のモバイル サファリです。

ただし、数行の JavaScript で簡単に修正できます。それがどのように行われるかの例:

window.onscroll = function() {
    document.getElementById('fixedDiv').style.top =
        (window.pageYOffset + window.innerHeight - 25) + 'px';
};

この質問を見てください：

Mobile Safari での固定位置

于 2012-06-30T06:51:09.153 に答える
0

新しい ios safari と Chrome 電話ブラウザ{position:fixed} では問題なく動作します。ただし、古いブラウザには ployfill を追加する必要があります。

于 2014-04-24T08:44:16.103 に答える