scrollToFixed -奇怪的滚动问题

scrollToFixed - weird scrolling issues

本文关键字：滚动 问题 scrollToFixed      更新时间：2023-09-26

我试图做一个简单的固定，而滚动与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，当向下滚动
    3. 时，left属性非常大
  3. 当通过点击并按住滚动条向上滚动(从所有方式向下)时，一旦它到达固定项目的点，它就会不规律地

我认为我的html和css是非常标准的，没有什么特别的…这种行为是由于我的代码或插件中的错误?

我已经为你更新了小提琴:

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

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

应用auto left属性到你的上下文元素似乎已经修复了它:)

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

我禁用了你用来制作"我不应该移动"的javascript -div粘贴到右边，离顶部45px。只使用css就可以很容易地做到这一点。使用位置固定，并给div设置一个边距。

第二个问题是你试图修复div的子元素。父节点仍然处于相对位置。

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

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

编辑:如果我只是粘贴修改的小提琴url它会工作吗?=) http://jsfiddle.net/kspA8/16/

编辑2:我刚刚检查了ScrollToFixed插件演示。看来你可能需要一个不同的答案。对不起!

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

解决方案是将元素.test-fixed移出右列，使其与中心div

相关文章：