0

友達、

私はまだjQueryの初心者であり、これをMobile Safariウィンドウの上部に固定する方法を考え出すのに非常に苦労しています。iScroll を試したり、jQuery Mobile を試したり、スクロール時に非表示にしたり消えたりするトリックについて読んだことがありますが、うまく動作しないようです。私が望むのは、ページを上下にスワイプしている間、小さなナビゲーション ボックスが画面の上部にとどまるようにすることだけです。現在、ページを下にスワイプしてスクロールすると、固定要素がコンテンツとともにページを上にスライドします。何かが欠けているところを誰かが教えてくれたら、ありがたいです。

これは、Mobile Safari が好きではない Safari 用の実用的なフィドルです: http://jsfiddle.net/gZ9ze/

これは基本的に、固定位置を持つ標準の div であり、クリックすると、負のトップ値までスライドします。もう一度クリックすると、0 のトップ値までスライドします。

前もってありがとう、レイン

CSS

.navigationBox {
    position: fixed;
    top:0px;
    left: 25px;
    width: 300px;
    height: 100px;
    background-color: black;
    color: grey;
    text-align: center;
}
.sliderButton {
    position: absolute;
    bottom: 0px;
    width: 100%;
    cursor: pointer;
    color:white;
}
.storyContent {
    padding-left: 15px;
    padding-top: 30px;
}

jQuery

var easingMethod = "easeOutCubic";
var opened = true;
function openNav() {
    $(".navigationBox").animate({
        top: 0
    }, 500, easingMethod);
    opened = true;
};
function closeNav() {
    $(".navigationBox").animate({
        top: -75
    }, 500, easingMethod);
    opened = false;
};
$('.sliderButton').click(function () {
    if (opened == true) {
        closeNav();
    } else {
        openNav();
    }
});

HTML

<div class="navigationBox">
    <div class="dummyNav">Dummy Nav Elements<br/>which will do other things.</div>
    <div class="sliderButton">Click here to slide me</div>
</div>
<div class="storyContent">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus feugiat porttitor porttitor. Ut tortor quam, convallis ut scelerisque eget, dignissim eu lorem. Ut ullamcorper velit a tellus iaculis rhoncus laoreet lectus cursus. Fusce et leo at magna pulvinar consectetur in vitae lacus. Morbi lorem odio, fermentum vitae tristique placerat, varius ac massa. Mauris egestas, mauris ac dictum consequat, turpis dui vehicula velit, et ornare ante dolor sed libero. 
    </p>
</div>
4

2 に答える 2

1

Position: fixed はモバイル ブラウザーでは機能しません。これをjsでシミュレートする必要があります。.navigationBox で position: absolute を設定し、スクロール イベントでバインドして、上からのオフセットを更新します。

$(document).scroll(function () {
   $(".navigationBox").css('top', $(document).scrollTop());
});
于 2013-01-21T08:11:37.867 に答える