scrollToFixed - 奇怪的滚动问题答案

【问题标题】：scrollToFixed - weird scrolling issuesscrollToFixed - 奇怪的滚动问题
【发布时间】：2013-06-04 16:50:42
【问题描述】：

我正在尝试使用ScrollToFixed 进行简单的固定滚动，但我遇到了一些奇怪的行为

我准备了一个jsfiddle，显示以下问题：

html:

<div class="row-fluid">
    <div id="car_left_col" class="span2">left</div>
    <div id="car_center" class="span8">
        <div class="car_main thumbnail">
            <div class="car_cover">
                <img alt="" src="http://www.autopulze.com/wp-content/uploads/2012/07/Rolls-Royce-Silver-Ghost-the-Best-Car-in-the-World.jpg">
            </div>
            <hr>
            <div class="car_page_creator"></div>
        </div>
        <div class="car_talk">here are the comments for the car</div>
    </div>
    <div id="car_right_col" class="span2">
        <div class="car_vote test_fixed">I should not move</div>
    </div>
    <div class="long"></div>

css:

.long {
    height: 10000px;
}
#car_right_col {
    position: relative;
}
.car_main {
    position: relative;
    padding: 0;
}
.car_cover {
    width: 100%;
    position: relative;
}
.car_cover img {
    width: 100%;
}
.test_fixed {
    position: static;
}
.car_vote {
    position: relative;
}

js:

$(document).ready(function () {
    $('.test_fixed').scrollToFixed({
        marginTop: 45,
        limit: $('.car_page_creator').offset().top
    });

});

一直向下滚动时，请注意一个水平滚动条，将页面可笑地向右拉伸
我认为这与第一个问题有关，要修复的项目 .test-fixed 在向下滚动时具有非常大的 left 属性
当通过单击并按住滚动条向上滚动（从一直向下）时，一旦到达固定项目的位置，它就会不稳定

我认为我的 html 和 css 非常标准，没有什么特别之处。这种行为是由于我的代码还是插件中的错误？

【问题讨论】：

我无法重现该行为。
试试这个全屏jsfiddle.net/guyisra/kspA8/2/embedded/result - 注意这里有2个滚动条，所以水平在最底部可见
我明白了，这很奇怪。

标签： javascript jquery html css css-position

【解决方案1】：

我已经为你更新了你的小提琴：

http://jsfiddle.net/kspA8/17/embedded/result/

.test_fixed {
  position: static;
  left: auto !important;
}

将 auto left 属性应用于您的上下文元素似乎已修复它：)

【讨论】：

这在 jsfiddle 中确实有效，但对我来说不幸的是，它在真实网站中不起作用。我已经添加了发现有效的解决方案

【解决方案2】：

这是我在 stackoverflow 上的第一个答案，所以我不确定我这样做是否完全正确 =)。

我禁用了用于使“我不应该移动”-div 向右和距离顶部 45px 的 javascript。您可以仅使用 css 轻松完成此操作。使用 fixed 位置并给 div 顶部的边距。

第二个问题是你试图修复 div 的孩子。父级仍然相对定位。

用这段代码替换原来的#car_right_col。希望它对你有用！

#car_right_col {
   margin-top:45px;
   position: fixed;
   right:0px;
}

编辑：如果我只是粘贴修改后的小提琴网址，它会起作用吗？ =)http://jsfiddle.net/kspA8/16/

Edit2：我刚刚查看了 ScrollToFixed 插件演示。看来您毕竟可能需要不同的答案..对不起！

【讨论】：

不...它应该只在到达目标元素之前保持固定。
我后来想通了。我想我没有完全理解你的问题。混合提供的答案似乎有效！ =)

【解决方案3】：

我在github 中打开了一个问题，我必须说响应很快

解决办法是去掉右列外的元素.test-fixed，使其与中心div同级

【讨论】：

完美！很高兴你把它整理好了。