Fixed Position on Samsung Galaxy S and S II

Question

The fixed positioned div (The bar with text 'Din Score' and apples in it) is not staying at the bottom of the page. This div class scrollingScoreBoard is using a javascript where it will stay positioned relative on desktop and laptop view, but will move to fixed position on mobile view.

But, on Samsung Galaxy S and S II, it doesn't stay at the bottom.

How should I keep it fixed at the bottom for these particular phones?

The real working site is here

Comparision between HTC One X and Samsung Galaxy S

enter image description here

So this is what I have:

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);
            });

You have contradicting `position: ... !important;` in your code for this div. This is dirty and might confuse the browser. BTW you don't show here the whole relevant CSS. — Denys Séguret, Feb 10 '14 at 12:15
Read this : https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#The_!important_exception — Denys Séguret, Feb 10 '14 at 12:28
you see, i've used media-query and that it's using different position for different view-ports. I'm pretty sure they are not contradicting within the same media-query condition. If now I see that, if I remove the ´!important´, it doesn't go to fixed position for mobile view. — CodeMonk, Feb 10 '14 at 12:42

score -1 · Answer 1 · answered Feb 10 '14 at 10:50

I had the same problem. What i could suggest you is, use window resize. I did not try that fiddle but the point is when your window resize, restart the sticky bar script.

$(window).resize(function(){
    var original_position_offset = $('#scrollingScoreBoard').offset();
    sticky_offset = original_position_offset.top;
    $('#scrollingScoreBoard').css('position', 'relative');
};

Fixed Position on Samsung Galaxy S and S II

1 Answers1