如何让div出现在它的容器外面并滚动，同时保持它的容器溢出

Question

我正在使用Wordpress博客设计，并遇到了入口标题的问题。我希望我的入口标题能够被偏移，超出它的容器范围，但在内容包装内滚动内容。这是我试图实现的截图。 ] 1

我希望红色区域与博文的文本一起滚动，但到目前为止，我能够让红色区域偏移的唯一方法如上所示，是设置位置：绝对。当position设置为relative时，它会显示如下所示。

您有什么想法可以帮我解决这个问题吗？

感谢。

Answer 1

用户@ divy3993声明小提琴会有所帮助。

无论如何：外部div的溢出似乎被隐藏了。这就是为什么当位置是相对时你没有看到标题的左侧部分的原因。

应用css-property

overflow-x: visible;

到你的外部div（具有深色背景的那个）并且应该显示完整的标题。

修改

很抱歉让你久等了......我有一段时间不看。 可悲的是，我正在考虑的解决方案（使用纯CSS）不起作用，因为它在https://stackoverflow.com/a/6433475/1402667中指出了

的组合

overflow-x: visible

和

overflow-y: auto

无法按预期工作。

因此，您似乎必须使用JavaScript来解决您的问题。我查看了您在注释中指出的链接（http://basil-gen.marathonwp.com/blog/）并在那里成功运行了以下jQuery代码：

var $headers = $('.site-inner h1');
var $scrollContainer = $('.site-inner .content-sidebar-wrap');

var hideShowHeaders = function(visibleTop, visibleBottom){
    $headers.each(function(){
        if($(this).show().offset().top < visibleTop || $(this).offset().top + $(this).outerHeight() > visibleBottom){
            $(this).hide();
        }else{
            $(this).show();
        }
    });
};

$headers.each(function(){
    $(this).data('initTop', $(this).position().top);
});

hideShowHeaders($scrollContainer.offset().top,  $scrollContainer.offset().top + $scrollContainer.height()); //might consider borders

$scrollContainer.scroll(function(){
    $headers.each(function(){
        $(this).css('top', $(this).data('initTop') -  $scrollContainer.scrollTop() );
    });
    hideShowHeaders($scrollContainer.offset().top,  $scrollContainer.offset().top + $scrollContainer.height()); //might consider borders
});

每当滚动内容容器时，它基本上会重新定位标头。当标题（或其中一部分）与position:relative不可见时，这些标题会被隐藏。在所有其他情况下，它们都会显示出来。

正如我提到的那样是jQuery-Code所以你需要包含jQuery，例如执行上面的代码

$(document).ready(function(){
   ...code above
});

如果您想直接测试它，您可以浏览到您的网站（http://basil-gen.marathonwp.com/blog/）打开Javascript-Console， 通过javascript注入jQuery，例如喜欢

var script = document.createElement('script');
script.src = "http://code.jquery.com/jquery-latest.min.js";
document.getElementsByTagName('head')[0].appendChild(script);

然后在Javascript-Console中执行上面的代码（当直接测试它时，你不应该在执行javascript代码之前滚动）。

我应该提到上面的代码并不完美，因为它只显示和隐藏标题而不是显示例如50％。我无法迅速找到解决方案。无论如何，您可以使用更复杂的showHideHeaders函数执行此操作，其中需要实现标记行

var hideShowHeaders = function(visibleTop, visibleBottom){
    $headers.each(function(){
        if($(this).show().offset().top + $(this).outerHeight() < visibleTop){
            if($(this).offset().top  < visibleTop){
                $(this).hide();
            }else{
                //lower part of this header needs to be displayed
                var bottomPxToShow = $(this).offset().top + $(this).outerHeight() - visibleTop;
                var hiddenPx = $(this).outerHeight() - bottomPxToShow;
                //show lower bottomPxToShow Pxs of header
            }
        }else if($(this).offset().top + $(this).outerHeight() > visibleBottom){
            if($(this).offset().top > visibleBottom){
                $(this).hide();
            }else{
                //upper part of this header needs to be displayed
            }
        }else{
            //show full header
        }
    });
};

我希望能帮到你！

Answer 2

给它相对较高的z-index

的位置

position:relative;
z-index:10;
left:-50px;

JSFiddle