Apple store 风格的固定 div 在 LEFT答案

【问题标题】：Apple store style fixed div on LEFTApple store 风格的固定 div 在 LEFT
【发布时间】：2012-08-10 08:44:23
【问题描述】：

我正在为此拉头发。我有一个网页，我想在左侧有一个固定位置的 div（鹦鹉和翻译器）在向下滚动时跟随页面。 http://www.cartoonizemypet.com/new/help/

我设法遵循了这个 tut http://jqueryfordesigners.com/fixed-floating-elements/ 并获得了我认为完美的效果！然后我试着在我的手机上查看它......当我放大爆炸的 div 时，它就移到了文本上！ :( 您可以通过缩小浏览器窗口并向右滚动来查看对常规浏览器的影响。

有人知道防止鹦鹉水平移动的方法吗？我一直在寻找解决方案，但似乎开始变得不可能。

这是相关的 CSS

#content {
    padding-top:20px;
    padding-bottom:713px;   /* Height of the footer element */
    width:888px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
}

#help-col1 {
    left:0;
    width:218px;
    position:absolute;
    height:500px;
}

#parrot-box {
    position:absolute;
    top:0;
    margin-top: 20px;
}

#parrot-box.fixed {
    position:fixed;
    top:0;
}

#help-col2 {
    width:634px;
    float:right;
}

随时查看页面源 (http://www.cartoonizemypet.com/new/help/) 以查看 SCRIPT 和 HTML。任何帮助将非常感激。

【问题讨论】：

我尝试解构教程的演示页面，看看我是否做错了什么，但一旦我将内容居中和/或将浮动 div 向右移动，固定 div 就会“逃逸”。

标签： javascript jquery css css-position

【解决方案1】：

当鹦鹉获得“固定”类时，鹦鹉（在#help-col1 内）的“左”值为 0。这意味着他将始终被附加到页面的左侧......不不管窗口的尺寸是多少，以及它如何滚动。

您要求的是当用户垂直滚动而不是水平滚动时，他的行为就像一个固定定位的元素。据我所知，这是不可能的。 Fixed 是固定的... x 和 y。

但是，有一些解决方案 (like this one) 谈论使用 javascript 来解决这个问题。这里的理论是，当页面水平滚动时，一个小的 javascript 可以监听，如果有，则相应地将鹦鹉推回原位。

就个人而言，我会考虑使用css media queries 来制作特定于移动设备的布局。您可以为网站的移动版本分配特定的 CSS，因此希望用户根本不需要缩放（或水平滚动）=)

祝你好运！

【讨论】：

好建议，谢谢！这是关于移动网站的一个很好的观点。我曾想设置其中的一个，但我知道有些人和我一样喜欢在我的手机上放大桌面网站。 :) 明天我会尝试你链接的 javascript 解决方案，让你们都知道它是怎么回事。脑子太疼了，现在就试试吧。
请记住，监听滚动事件的 JS 解决方案通常明显滞后
正确，o.v.这就是促使我提出媒体查询建议的原因 =)

【解决方案2】：

已建议使用 JS 滚动事件侦听器，但依赖它的所有实现都系统性地滞后。我认为使用媒体查询来确定固定定位是否合适（即，如果窗口/设备足够宽，则可以，否则用替代行为替代）会更好。

您实际上可以将鹦鹉留在顶部以适应窄屏幕并保留一些空间，并解决旧的移动 Safari 版本无法正确解释 position:fixed 的问题。您当然可以实现一种更精细的方法，但这应该是一个很好的起点 - 尝试一下，在您的页面上执行以下脚本（在控制台中就可以了）：

$('head').append('<style type="text/css">#parrot-box.fixed {position:absolute;}</style><style type="text/css" media="screen and (min-width: 982px)">#parrot-box.fixed {position:fixed !important;}</style>');

首先，它会覆盖原始的 #parrot-box.fixed 声明，然后将浮动样式应用于窗口至少为 982 像素宽（您的页面包装器宽度）时。

【讨论】：

这真是太聪明了！ :) cartoonizemypet.com/new/help/index2.shtml 对于浏览器来说这是一个很好的解决方法，但不幸的是，当我放大手机时，鹦鹉仍然会逃脱。我猜是因为放大不同于调整大小（？）
@user1597021: mobile browsers don't support position:fixed，我相信 iOS5 后的 Safari 除外。您必须将它们从上面建议的规则中排除 - 不幸的是有no feature-detection alternative for this property。

【解决方案3】：

大家不用担心，我丈夫想出了另一种方法来完成这项工作！ :)

而不是随着页面移动鹦鹉；我将在答案 div 中有多个版本的鹦鹉。这样，当用户点击答案时，它会弹出并出现在它旁边的鹦鹉。

不是我最初的计划，但我认为我可以让这种新方式看起来更好！

无论如何感谢您的帮助！ :)

【讨论】：