允许移动设备用户在“位置:固定"和“位置:静态"(或“相对")之间切换div [英] Enable mobile device users to toggle div between `position: fixed` and `position: static` (or 'relative')

问题描述

我刚刚回到网页设计领域，并且发生了很多变化.目前，我正在阅读大量CSS教程，而我只是读到了position:fixed及其移动浏览器问题.

I am just getting back into web design and a ton has changed. I'm going through lots of css tutorials at the moment, and I just read about position: fixed and its problems with mobile browsers.

这足以让我忽略它并继续进行更重要的事情，但是我想知道...如果我有一个小的固定"图标，用户可以切换到取消固定"该元素怎么办?如果他们觉得对他们来说很麻烦?有可能吗?

That is reason enough for me to ignore it and move on to more important things, but I got wondering... what if I had a little "pin" icon that the user could toggle to "un-fix" that element if they found it troublesome for them? Possible?

通过取消固定"，是的，我的意思是将其从固定更改为静态/默认.

By "un-fix", yes I mean change it from fixed back to static/default.

不，不是一个简单的视口逻辑设置，移动设备无法看到它……因为移动设备"不是简单定义的.这只是在某些浏览器上的问题，因此我认为应该由用户决定，无论是移动设备还是其他方式.单击图钉，它不再...很好...已固定.这样，用户可以减轻某些浏览器的异常行为.

And no, not a simple viewport logic setup where mobile can't see it... because "mobile" isn't simply defined. It is only a problem on SOME browsers, so I think it should be left up to the user, mobile or otherwise. Click the pin, it is no longer... well... pinned. That way the aberrant behaviour of certain browsers can be mitigated by the user.

推荐答案

要使用户能够控制手动释放固定元素，下面是一个简单的解决方案概念:

To give users the control to manually release a fixed element, here's one simple concept for a solution:

演示

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

---

要在移动设备上提供固定元素的自动版本，请使用媒体查询:

---

To provide for an automatic release of a fixed element on a mobile device use media queries:

示例:

footer {
    position: fixed;
}

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

这篇关于允许移动设备用户在“位置:固定"和“位置:静态"(或“相对")之间切换div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！