Javascript 苹果商店风格的固定分区位于左侧

我正为这件事大发雷霆。我有一个网页，我想有一个固定位置的div在左边（鹦鹉和翻译）跟随页面向下滚动。

我设法遵循这个图坦卡蒙，并得到了我认为是一个完美的效果！然后我试着在手机上看。。。。我一放大，那该死的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/)查看脚本和HTML。任何帮助都将不胜感激。

当鹦鹉获得“修复”类时，鹦鹉（在#help-col1内）“left”值为0。这意味着他将始终附加到页面的左侧…无论窗口的大小和滚动方式如何

你所要求的是当用户垂直滚动时，他表现得像一个固定位置的元素，而不是水平滚动。据我所知，这是不可能的。固定是固定的…x和y

然而，有一些解决方案（）谈到了使用javascript来解决这个问题。这里的理论是，当页面水平滚动时，一点javascript可以听到，如果水平滚动，则可以相应地将鹦鹉推回原位

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

---

祝你好运

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

实际上，你可以把鹦鹉放在窄屏幕的顶部，保留一些不动产，并解决旧版移动Safari无法正确解释的问题。

position:fixed

。您当然可以实现一种更精细的方法，但这应该是一个很好的起点—要尝试它，请在页面上执行以下脚本（仅在控制台中即可）：

$（'head'）.append（'parrot-box.fixed{position:absolute；}}parrot-box.fixed{position:fixed！important；}'）；

---

首先，它覆盖了原始的鹦鹉框。修复了声明，然后在窗口宽度至少为982px（您的页面包装宽度）时应用浮动样式。

不要担心每个人，我丈夫想出了另一种方法来实现这一点！）

而不是用书页移动鹦鹉；我将在答案分区中有多个版本的鹦鹉。这样，当用户点击一个答案时，它会弹出并显示在旁边的鹦鹉

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

---

无论如何谢谢你的帮助！：）

我试图解构教程的演示页面，看看我是否做错了什么，但当我将内容居中和/或将浮动div移到右侧时，固定div“escapes”出现了。很好的建议，谢谢！这是一个伟大的点关于移动网站；我本想安装其中一个，但我知道，像我这样的人喜欢放大我手机上的桌面网站。：）明天我将尝试您链接的javascript解决方案，并让你们都知道它是如何运行的。现在试一试对大脑的伤害太大了。记住，收听滚动事件的JS解决方案通常明显滞后正确，o.v.这就是促使我提出媒体查询建议的原因=）这真是聪明的thx:）这对于浏览器来说是一个很好的解决办法，但不幸的是，当我放大手机时，鹦鹉还是逃走了。我猜是因为放大与调整大小（？）@user1597021:，不同，我相信，除了iOS5之后的Safari。你必须将他们排除在上述规则之外——不幸的是，确实存在。

$('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>');