scrollToFixed - 滚动问题奇怪

Question

我正在尝试使用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
    });

});

1. 当滚动到底部时，注意到一个水平滚动条，将页面荒谬地向右拉伸。
2. 我认为这与第一个问题有关，需要修复的项目.test-fixed在向下滚动时具有非常大的left属性。
3. 当通过单击并按住滚动条向上滚动（从最底部开始），一旦到达固定项目的点，它就会出现不规则行为。

我认为我的HTML和CSS基本上是标准的，没有什么特别之处...这种行为是由于我的代码还是插件中的错误？

- Nick Ginanto

---

我无法重现这种行为。 - howderek

请尝试使用全屏模式查看此链接：http://jsfiddle.net/guyisra/kspA8/2/embedded/result/ 注意，此页面有两个滚动条，因此水平滚动条位于最底部可见。 - Nick Ginanto

我看到了，这很奇怪。 - howderek

Answer 1

我已经为您更新了fiddle： http://jsfiddle.net/kspA8/17/embedded/result/

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

应用自动左属性到您的上下文元素似乎已经解决了它：）

- blend

---

这段代码在 jsfiddle 上可以运行，但不幸的是，在实际网站上无法运行。我已经添加了可行的解决方案。 - Nick Ginanto

Answer 2

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

我禁用了你用来让“我不应该移动”的div固定在右侧并距顶部45像素的JavaScript。你可以仅使用CSS轻松解决此问题。使用position fixed并给div一个margin top。

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

请使用以下代码替换原始的＃car_right_col。希望这对您有用！

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

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

编辑2：我刚刚查看了ScrollToFixed插件演示。看来你可能需要一个不同的答案..抱歉！

- Sapulidi

---

不，它应该保持固定，直到您到达目标元素。 - blend

我后来明白了。我猜我没有完全理解你的问题。Blend提供的答案似乎有效！=) - Sapulidi

Answer 3

我在github上开了一个问题，必须说回应很快

解决方案是将元素.test-fixed从右侧列中移除，并使其与中心div处于同一级别

- Nick Ginanto

---

太好了！很高兴你解决了它。 - blend