Question

如何在父元素的范围内进行div固定/滚动。我已经尝试使用各种javascript函数来尝试实现这一点无济于事它们不能容纳容器/父div的高度或者根本不工作 - 我想要实现的是当窗口滚动到红色上方60px时滚动div（在图像中看到），它应该固定（最好保持它的宽度）ntil它与父/容器div的底部相遇然后在相对父div中的位置绝对位于“bottom：20px” div是相对定位的，不能有滚动条，红色div的高度小于父div的高度...它是固定的。这个问题有没有javascript和/或css解决方案？< / p>

这是我尝试过的东西的javascript：

    var windw = this;

$.fn.followTo = function ( elem ) {
    var $this = this,
        $window = $(windw),
        $bumper = $(elem),
        bumperPos = $bumper.offset().top,
        thisHeight = $this.outerHeight(),
        setPosition = function(){
            if ($window.scrollTop() > (bumperPos - thisHeight)) {
                $this.css({
                    position: 'absolute',
                    top: (bumperPos - thisHeight)
                });
            } else {
                $this.css({
                    position: 'fixed',
                    top: 0
                });
            }
        };
    $window.resize(function()
    {
        bumperPos = pos.offset().top;
        thisHeight = $this.outerHeight();
        setPosition();
    });
    $window.scroll(setPosition);
    setPosition();
};

$('#one').followTo('#two');

HTML：

<body>
<div id="container" style="width:200px;">
    <div id="one">FIXED...</div>
    <div id="two">...BUT STOPS HERE</div>
</div>
</body>

的CSS：

body, html{
    height:200%;
}


#one {
    width:100%;    
    height: 200px;
    background-color: aqua;
    position: fixed;
}


#two {
    width: 100%;    
    height:50px;
    background-color: red;
    margin-top:150%;
    position:absolute;
}

如何在父div /容器中的y轴上创建div可滚动

0 个答案: