使移动设备用户能够在“位置：固定”和“位置：静态”（或“相对”）之间切换 div

Question

我刚刚回到网页设计领域，并且发生了很多变化。目前我正在阅读很多 css 教程，我刚刚阅读了关于 position: fixed 及其 problems with mobile browsers 的信息。

这足以让我忽略它并继续做更重要的事情，但我想知道......如果我有一个小的“pin”图标，用户可以切换到“un-fix”那个元素如果他们觉得这对他们来说很麻烦？可能吗？

通过“取消修复”，是的，我的意思是把它从固定改回静态/默认。

不，不是移动设备看不到的简单视口逻辑设置...因为“移动设备”不是简单定义的。这只是某些浏览器上的问题，所以我认为它应该留给用户，移动设备或其他方式。单击图钉，它不再……嗯……固定。这样用户就可以缓解某些浏览器的异常行为。

Answer 1

为了让用户控制手动释放固定元素，这里有一个简单的解决方案概念：

DEMO

HTML

<div id="fixed">
    <h1>Header</h1>
    <p id="release-button"><a href="#">click here to release</a></p>
    <br>
    <p><i>Just an illustration of a concept.
          Not built to toggle. Click 'Run' to refresh.</i></p>
 </div>

CSS

     body { height: 1500px; }

    #fixed {
        width: 95%;
        height: 200px;
        background-color: #ff0;
        border: 1px solid #ccc;
        text-align: center;
        margin: 0;
        padding: 0;
        position: fixed;

    }

    .static {position: static !important;}

jQuery

$('#release-button').click(function() {
    $('#fixed').addClass('static');
});

---

要在移动设备上自动发布固定元素，请使用媒体查询：

例子：

footer {
    position: fixed;
}

@media only screen and (max-device-width : 480px) {
    footer {
        position: static; /* or relative */
    }
}