Question

我有一个固定在屏幕底部的音乐播放器，当我滚动300px时，他应该开始滚动其余的内容。所有这一切在计算机上运行良好，但在移动设备上无效很难用我的英语技巧来解释这一点。

我做了一个jsfiddle，但是我无法在那里工作。在我的项目中，它有效。我滚动300px后，音乐播放器应该开始滚动。如果它可行，它将无法正确地在移动设备上工作。在移动设备上它是生涩的，当我滚动时不要刷新位置。只有当我停止滚动时，它才会跳到正确的位置。但它在电脑上并不顺畅。

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

我的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;
}

我的javascript：

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

修改我有个主意。但此刻我没有时间再试一次。我明天试试。

滚动时，javascript css-manipulation在手机上生涩

0 个答案: