Question

我在容器中有两个divs。一个是absolutely定位并位于顶部。第二个div是其容器的底部。它们都位于具有position: relative的容器内。如果用户在底部div上滚动水平而不是垂直，则绝对定位的div也会滚动。问题在于，由于它是绝对定位的，所以当滚动底部时整个div将移动。

有没有办法防止这种情况发生？无论如何，我只想保持原状。

这是一个JSFiddle示例。我不能只更改容器的position: relative属性，因为在我的情况下，它会弄乱页面中的其他所有内容。

https://jsfiddle.net/2m16rtjp/6/

要查看所需的一组结果（我在谈论水平滚动时的查看方式），请将position: absolute替换为position: fixed .titleSection-right。我需要让div完全定位才能使插件正常工作。

Answer 1

尝试使用position:fixed代替postion:absolute

.titleSection-right {
  position : fixed;
  top : 0;
}

Answer 2

在script

中添加此内容

$(".rightSide").scroll(function() {
    if ($(".rightSide").scrollLeft() > 0)
    {
        $(".titleSection-right").css( "position", "fixed" );
    } else {
        $(".titleSection-right").css( "position", "absolute" );
    }
});

Answer 3

我提供了简单标记的新小提琴，因为你的不够清楚，希望这有帮助，这个想法很简单，在<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" android:versionCode="1" android:versionName="1.0" package="app.monodroid"> <uses-sdk android:minSdkVersion="15" /> <application android:label="Push_Money_N"> </application> </manifest>滚动，我们可以更改rightSide的{{1}}。

HTML：

left

CSS：

titleSection-right

JS：

<div class="container">
    <div class="box1">
        <div></div>
    </div>
    <div></div>
</div>

jsfiddle link

停止绝对定位的div以在相对父级内移动

3 个答案: