[英]Fixed Position on Samsung Galaxy S and S II
固定定位的div(帶有文本'Din Score'的欄和其中的蘋果)不會停留在頁面底部。 這個div類scrollingScoreBoard
使用的是javascript,它將保持相對於桌面和筆記本電腦的視圖,但會移動到移動視圖上的固定位置。
但是,在三星Galaxy S和S II上,它並沒有停留在底部。
對於這些特定的手機,我該如何將它固定在底部?
真正的工作地點在這里
HTC One X和三星Galaxy S的比較
所以這就是我所擁有的:
HTML:
<div id="scrollingScoreBoard">
<div class="currentScoreBox">
<div class="currentScoreText">
<p>Din Score</p>
</div>
<div class="greenAppleContainer">
<img class="appleGreenActive" src="eimg/blankApple.png" alt="" >
<img class="appleGreenDefault" src="eimg/blankApple.png" alt="" >
<img class="appleGreenDefault" src="eimg/blankApple.png" alt="" >
<img class="appleGreenDefault" src="eimg/blankApple.png" alt="" >
<img class="appleGreenDefault" src="eimg/blankApple.png" alt="" >
</div>
</div>
</div>
CSS:
#scrollingScoreBoard{
width: 320px;
color: white;
position: relative !important;
bottom: 0px;
margin:auto;
text-align:center;
left:0;
right:0;
background-color:#163c15;
z-index:1000;
clear:both;
}
.currentScoreBox{
position:relative;
background:url(../eimg/head_bg.png) 0 0 repeat scroll transparent;
height:47px;
width:100%;
max-width:320px;
text-align:left !important;
}
.currentScoreText{
float:left;
padding: 2px 0 0 70px;
}
.currentScoreBox .greenAppleContainer{
float: left;
padding: 12px 0 0 12px;
}
@media screen and (max-width:640px) {
#scrollingScoreBoard{
width: 320px;
color: white;
position: fixed !important;
bottom: 0px;
margin:auto;
text-align:center;
left:0;
right:0;
background-color:#163c15;
z-index:1000;
clear:both;
}
}
@media screen and (max-width:420px) {
#scrollingScoreBoard{
width: 100%;
}
}
JS:
var sticky_offset;
$(document).ready(function() {
var original_position_offset = $('#scrollingScoreBoard').offset();
sticky_offset = original_position_offset.top;
$('#scrollingScoreBoard').css('position', 'relative');
});
$(window).scroll(function () {
var sticky_height = $('#scrollingScoreBoard').outerHeight();
var where_scroll = $(window).scrollTop();
var window_height = $(window).height();
if((where_scroll + window_height) > sticky_offset) {
$('#scrollingScoreBoard').css('position', 'relative');
}
if((where_scroll + window_height) < (sticky_offset + sticky_height)) {
$('#scrollingScoreBoard').css('position', 'fixed');
}
});
$(document).ready(function() {
window.scrollTo(0,1);
});
我有同樣的問題。 我建議你的是,使用窗口調整大小。 我沒有嘗試那個小提琴,但關鍵是當你的窗口調整大小時,重新啟動粘滯條腳本。
$(window).resize(function(){
var original_position_offset = $('#scrollingScoreBoard').offset();
sticky_offset = original_position_offset.top;
$('#scrollingScoreBoard').css('position', 'relative');
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.