Question

我把头发拉过来。我有一个网页，我希望在左侧有一个固定的位置div（parrot＆amp; translater），当它向下滚动时跟随页面。 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

当鹦鹉获得“固定”类时，鹦鹉（＃help-col1内部）的“左”值为0.这意味着他总是会被附加到页面的左侧...无论窗户的尺寸是什么，以及它如何滚动。

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

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

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

祝你好运！

Answer 2

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

你实际上可以将鹦鹉留在顶部以进行窄屏幕并保留一些空间以及解决旧版移动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声明，然后在窗口宽度至少为982px（页面包装宽度）时应用浮动样式。

Answer 3

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

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

不是我原本计划出来的，但我想我可以让这种新方式看起来更好！

感谢您的帮助！：）

Apple商店风格固定div在LEFT上

3 个答案: