5

我正在为此拔头发。我有一个网页，我想在左侧有一个固定位置的 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。任何帮助将非常感激。

4

3 回答 3

3

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

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

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

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

祝你好运！

于 2012-08-14T07:24:26.793 回答
1

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

实际上，您可以将 parrot 留在顶部以用于窄屏幕并保留一些空间，并解决旧的移动 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 宽（您的页面包装器宽度）时。

于 2012-08-14T08:24:28.903 回答
-1

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

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

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

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

于 2012-08-18T00:55:22.310 回答