jquery - CSS 位置 :fixed not fixed in Mobile Safari. .. 再次

Question

friend ，

我对 jQuery 还是有点陌生​​，我花了很多时间弄清楚如何让这个东西粘在我的 Mobile Safari 窗口的顶部。我试过 iScroll，我试过 jQuery Mobile，我读过有关使其在滚动中隐藏和消失的技巧，等等。但我似乎无法让它工作。我想要的只是让小导航框在我上下滑动页面时停留在屏幕顶部。就像现在一样，当我向下滑动页面进行滚动时，固定元素会随着内容向上滑动页面。如果有人能告诉我哪里遗漏了什么，我将不胜感激。

这是一个不喜欢 Mobile Safari 的 Safari 工作 fiddle : 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>

Answer 1

Position: fixed 不适用于移动浏览器。你必须用js模拟这个。在 .navigationBox 上设置 position: absolute 并绑定(bind)滚动事件以更新距顶部的偏移量。

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