CSS位置是：固定不固定在移动Safari ......再次

朋友，CSS位置是：固定不固定在移动Safari ......再次

我还是八九不离十新jQuery和我有宏大搞清楚如何让这件事坚持到顶部我移动Safari窗口。我试过iScroll，我试过了jQuery 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>

来源

2013-01-21 Layne

据我所知，位置固定不适用于手机。 –

位置：固定在暴徒不工作浏览器。你必须用js来模拟这个。在.navigationBox上设置绝对位置，并在滚动事件上绑定以更新顶部的偏移量。

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

来源

2013-01-21 08:11:37

Drat！我的经验是，像这样的div滑动，然后在滚动完成后移回原位。是否有startScroll或者我可以在startScroll上隐藏导航框然后在它移回原位时显示它？我宁愿它只是隐藏和放映，而不是放在整个地方。 – Layne

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

来源

2013-07-25 09:36:46

CSS位置是：固定不固定在移动Safari ......再次

回答

相关问题