CSS位置：已修复，但未在Mobile Safari中修复...

Question

朋友们

我仍然对jQuery还是陌生的，并且正在度过一个愉快的时光，弄清楚如何使该内容粘贴到我的Mobile Safari窗口的顶部。 我尝试过iScroll，尝试过jQuery Mobile，已经阅读了一些使之在滚动中隐藏和消失的技巧，等等。但是我似乎无法使其正常工作。 我想要的只是将小导航框停留在屏幕顶部，同时上下滑动页面。 现在，当我向下滑动页面以滚动时，固定元素会将包含内容的页面向上滑动。 如果有人可以告诉我我哪里缺少什么，我将不胜感激。

这是不适合移动Safari的Safari浏览器： http : //jsfiddle.net/gZ9ze/

基本上，这是一个具有固定位置的标准div，当您单击该位置时，它会向上滑动到负的最大值。 再次单击时，它将向下滑动到0最高值。

在此先感谢Layne

的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>

Answer 1

位置：固定在移动浏览器上不起作用。 您必须使用js进行模拟。 在.navigationBox上设置位置：absolute，并在滚动事件上绑定以更新从顶部开始的偏移量。

$(document).scroll(function () {
   $(".navigationBox").css('top', $(document).scrollTop());
});

Answer 2

您可以将事件处理程序添加到“ touchstart”和“ touchend”以隐藏和显示div。