我使用以下 CSS 设置了一个不错的小滑块:
/*SLIDER
===================================
*/
#full-slider-wrapper {
overflow: hidden;
}
#full-slider {
position: relative;
width: auto;
min-height: 1200px;
margin: 0 auto;
}
#full-slider .slide-panel {
position: absolute;
top: 0;
left: 0;
width: auto;
visibility: hidden;
}
#full-slider .slide-panel.active {
visibility: visible;
}
#full-slider-nav-left
{
position: fixed; top: 550px; width: auto; margin: auto 0 auto auto;
left: 0; width: 0; height: 0; cursor: pointer; border: 20px solid transparent;
}
#full-slider-nav-right {
position: fixed; top: 550px; width: auto; margin: auto auto auto 0;
right:0; width: 0; height: 0; cursor: pointer; border: 20px solid transparent;
}
#full-slider-nav-left {
border-right-color: #BBB;
}
#full-slider-nav-left:hover {
border-right-color: #999;
}
#full-slider-nav-right {
border-left-color: #BBB;
}
#full-slider-nav-right:hover {
border-left-color: #999;
}
如您所见,我在容器的两侧设置了导航箭头。当我上下滚动页面时,它们保持不变。我正在使用响应Skeleton framework
式浏览器,当我将浏览器折叠到移动尺寸时,箭头工作正常。箭头在 android 平台上也可以正常工作。但是,当我尝试在 iPhone 上浏览网站时,箭头会随着滚动而跳来跳去,然后消失。
根据我的阅读,iPhone 过去曾遇到过问题position:fixed
,但据说 iOS 5 解决了这个问题。
不幸的是,我没有现场版本的网站来演示这个问题。
任何帮助将不胜感激。