0

I have a musicplayer fixed on the bottom of the screen and when I scroll 300px he should start to scroll with the rest of the content. All that works fine at the computer but not on mobile. Its dificult to explain this with my skill in english.

I made a jsfiddle but i cant get it to work there. In my project it works. The musicplayer should start to scroll after i scrolled 300px. If it would work it wouldnt work on mobiles correctly. On mobile it is jerky and dont refresh the position when i am scrolling. only when i stop the scrolling it jumps to the correct position. But it is not smooth like on the computer.

<body>
    <div id="content">
        //long text see jsfiddle
    </div>
    <div id="musicplayer">
        <div id="control">Musicplayer: play/pause</div>
    </div>
</body>

my css:

#content {
    width: 2000px;
    background-color: black;
    color: white;
    margin-bottom: 300px;
}

    #musicplayer {
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 100px;
    background-color: #485670;
    z-index: 5;
    color: white;
}

my javascript:

$(window).scroll(function () {
    if ($(window).scrollTop() >300) {
        $('#musicplayer').css('bottom', $(window).scrollTop()-300);
    }
    else if($(window).scrollTop() < 300) {
        $('#msuciplayer').css('bottom', 0)
    }
});

Edit: I got an idea. but at the moment i dont have time to try it out anymore. I try it tomorrow.

kruben
  • 142
  • 2
  • 14
  • 2
    I would not suggest using javascript at all to attach something in a fixed location on a page on mobile. That's your problem right there. Force gpu rendering and then fix it to the bottom of the page with css. – pattmorter Jul 22 '14 at 15:10
  • Ok I shouldnt do it like this but i think you dont understand what i want exactly. How can I make a fixed object to move after you scrolled a specific distance? – kruben Jul 22 '14 at 15:17
  • Have two classes. One with the fixed location and another not fixed. Then at that distance changes the classes with `$('.someclass').addClass('fixed');` then back when you want it to move again just do `$(.someclass').removeClass('fixed');`. Rather than modifying the css via js, you're just replacing. Might seem similar but the add and remove allows for css animations and transitions. – pattmorter Jul 22 '14 at 15:19
  • dude thanks. I got a similar idea but yours sounds better. at the moment I have no time to try it out. I try it tomorrow. It would be cool if you use the "Answer qusetion" button so i can give you a like. Maybe you extend your answer a little bit and tommorw maybe i can accept your answer :D – kruben Jul 22 '14 at 15:24
  • I will. I'm at work right now So I can't put together a fiddle and without a fiddle it'll be pointless. – pattmorter Jul 22 '14 at 15:25
  • do you have anything? – kruben Jul 24 '14 at 07:29

0 Answers0