Javascript 侧面弹出div与粘性滚动冲突

我有一个div，一旦点击就会展开，它也会贴在滚动页面的顶部

div可以很好地展开，但是当我滚动时，它会向左推动展开的div

我不知道为什么会这样，有人能看到错误吗

我认为这与

位置的两种变化有关：绝对当我试图解决这个问题时，却没有成功

夏季

侧面的俯冲在单击之前应仅显示红色位，单击后将显示带有
的其余俯冲。（在向下滚动页面之前，此操作一直有效）

其次，当您向下滚动页面时，弹出div应该保持在页面顶部。当您向下滚动时，它会在页面顶部停留或粘住，但div会展开以显示全部。（这不应该发生）

HTML

<div class="da8 m-hide t-hide db-hide">
        <div id="catcher">
            some random text
        </div>
        <div id="sticky">
            <div id="slideout">
                <div id="slidecontent">
                    text pop out
                </div>

                <div id="clickme">
                    <p>my title</p>
                </div>
            </div>
        </div>
    </div>

这是行动中的突然出现



正如您看到的，它从右边的fine中弹出，当您滚动时，问题发生了，固定div发生了


在滚动时，它会弹出到far
，试图获取一个工作示例来查看问题。这是一个带有固定元素打开和关闭的编辑版本。你能用叉子叉它并显示滚动问题吗？谢谢，我确实试过让这个例子在堆栈中运行。但无法让它发挥作用。你能澄清“棍子”是什么意思吗？它应该在滚动时滚动出视口，或者保持可见？我将更新位于固定位置的问题条
$(document).ready(function () {
    function isScrolledTo(elem) {
        var docViewTop = $(window).scrollTop(); 
        var docViewBottom = docViewTop + $(window).height();
        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();
        return ((elemTop <= docViewTop));
    }

    var catcher = $('#catcher');
    var sticky = $('#sticky');
    $(window).scroll(function () {
        if (isScrolledTo(sticky)) {
            sticky.css('position', 'fixed');
            sticky.css('top', '0px');
        }
        var stopHeight = catcher.offset().top + catcher.height();
        if (stopHeight > sticky.offset().top) {
            sticky.css('position', 'absolute');
            sticky.css('top', stopHeight);
        }
    });
});

$(function () {
    $("#clickme").toggle(function () {
        $(this).parent().animate({right: '0px'}, {queue: false, duration: 500});
    }, function () {
        $(this).parent().animate({right: '-280px'}, {queue: false, duration: 500});
    });
});

  body {
    overflow-x: hidden;
}
#slideout {
    background: #2c83c9;
    position: absolute;
    width: 280px;
    height: 146px;
    top: 11.3%;
    right:-280px;
    padding-left: 20px
}

#clickme {
    position: absolute;
    top: 0; left: 0;
    /*height: 80px;*/
    /*width: 20px;*/

}

#clickme p{
    transform: rotate(90deg);
    transform-origin: left top 0;
    background: #ff0000;
    width: 100%;
}

#slidecontent {
    float:left;
}