javascript - Apple store 样式固定 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/) 以查看脚本和 HTML。任何帮助将非常感激。

Answer 1

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

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

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

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

祝你好运!