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 ......再次

回答

相關問題