javascript - 仅适用于手机/手机的粘性 div

Question

在顶部，我有两个部分，第二个部分应该在用户滚动通过它后得到修复，但仅限于手机。

看看这个例子:https://jsfiddle.net/livibetter/HV9HM/

这正是我想要做的，但我希望这只发生在手机设备上。在桌面上，这些部门的行为会有所不同。在桌面上，顶部的两个分区是固定的，因此这不是问题并且可以正常工作。

在手机上，我已经从第 1 区和第 2 区删除了 fixed，当用户经过第 2 区时，我想让它固定下来并像上面给出的示例那样工作。

来自 Fiddle 的示例代码

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_top = $('#sticky-anchor').offset().top;
    if (window_top > div_top) {
        $('#sticky').addClass('stick');
        $('#sticky-anchor').height($('#sticky').outerHeight());
    } else {
        $('#sticky').removeClass('stick');
        $('#sticky-anchor').height(0);
    }
}

#sticky {
    padding: 0.5ex;
    width: 600px;
    background-color: #333;
    color: #fff;
    font-size: 2em;
    border-radius: 0.5ex;
}

#sticky.stick {
    margin-top: 0 !important;
    position: fixed;
    top: 0;
    z-index: 10000;
    border-radius: 0 0 0.5em 0.5em;
}

body {
    margin: 1em;
}

p {
    margin: 1em auto;
}

Answer 1

您始终可以在 CSS 端使用媒体查询来实现此目的，例如我下面的示例:

@media screen and (max-width: 430px)
{
 .cssEntry {
  background: pink;
 }
}

注意:您可以修改移动设备的宽度，但通常 430 像素就足够了。