Apple商店风格固定div在LEFT上

Question

我把头发拉过来.我有一个网页,我希望在左侧有一个固定的位置div(鹦鹉和翻译),当它向下滚动时跟随页面. http://www.cartoonizemypet.com/new/help/

我设法跟随这个问题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.任何帮助将非常感激.

Answer 1

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

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

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

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