Question

在顶部我有两个分区，第二个分区应该在用户滚动后才能修复，但仅限于手机。

以此为例：https://jsfiddle.net/livibetter/HV9HM/

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

在手机上我已经从第一和第二分区删除了固定，当用户经过第二分区时，我想使其固定并按照上面给出的例子显示。

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

注意：您可以修改移动宽度，但通常430px就足够了。

Sticky div仅适用于手机/手机

1 个答案: