Question

我刚刚回到网页设计中并且已经改变了。我现在正在阅读很多css教程，我刚读了一下position：fixed和它的problems with mobile browsers。

这足以让我忽略它并转向更重要的事情，但我想知道......如果我有一个小“pin”图标，用户可以切换到“解除”该元素如果他们发现它们很麻烦？可能的？

通过“取消修复”，是的，我的意思是将其从固定更改为静态/默认。

不，不是简单的视口逻辑设置，移动设备无法看到它......因为“移动”不是简单定义的。这只是某些浏览器的一个问题，所以我认为它应该由用户，移动或其他方式决定。点击针，它不再......好...固定。这样，用户可以减轻某些浏览器的异常行为。

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

使移动设备用户能够在`position：fixed`和`position：static`（或'relative'）之间切换div

1 个答案: