Question

友

我仍然是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>

Answer 1

位置：固定不适用于移动浏览器。你必须用js模拟这个。在.navigationBox上设置position：absolute并在scroll事件上绑定以从顶部更新偏移量。

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

Answer 2

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

CSS位置：修复后不再固定在Mobile Safari中

2 个答案: