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 doesn't work on mobile browsers. You have to simulate this with js. Set position: absolute on .navigationBox and bind on the scroll event to update the offset from the top.

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

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

于 2013-07-25T09:36:46.110 回答