允许移动设备用户在“position: fixed”和“position: static”（或'relative'）之间切换div

Question

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

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

"un-fix"，是的，我的意思是将其从固定更改回 static/default。

不，不是简单的视口逻辑设置，移动设备看不到它...因为 "mobile" 不是简单定义的。这只是某些浏览器上的问题，所以我认为应该留给用户，无论是移动设备还是其他方式。单击图钉，它不再......好吧......固定。这样用户就可以减轻某些浏览器的异常行为。

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 */
    }
}