Question

我有一个div，一旦点击就会展开，这也会在滚动时粘在页面顶部。

div扩展正常，但是当我滚动时，它会向左推动我的扩展div。

我不确定为什么会这样做，有人能看到错误吗？

我认为它与position: absolute;的两种变体有关，但是当我试图修复它时，我没有成功。

大

侧面潜水应该只显示红色位，直到点击为止，一旦点击它将显示div的其余部分<ul> in。（这一直有效，直到你向下滚动页面）

其次，当你向下滚动页面时，pop out 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>

JS

$(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});
    });
});

CSS

  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;
}

这是行动中的弹出

正如你可以看到它从正确的罚款中弹出，当你滚动并发生固定的div时问题就会发生

在滚动时弹出到远

用弹出滚动弹出div冲突

0 个答案: