滑动选项卡的背景在滚动/溢出部分消失

Question

滑动标签CSS如下：

#tab_slide {
    overflow-x: auto; // added by me for vertical scrollbar
    overflow-y: auto; // added by me for vertical scrollbar
    height: 100%!important; // added by me for vertical scrollbar
    color: #000; 
    font-family: inherit;
    font-size: 14px;
    top: 5%;
    position: fixed;
    z-index: 2147483647;
}

幻灯片标签背景的CSS如下:

#tab_slide_background {
    background: #fff;
    box-shadow: 1px 1px 2px #000;
    height: 100%;
    opacity: 0.8;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

不幸的是，如果有任何溢出并出现滚动条，则向下滚动时没有背景。

相关网站位于 http://thehungrygeek.com

如果能帮助我弄清楚如何在用户必须向下滚动时显示背景（即用户的显示高度小于幻灯片选项卡内容），我将不胜感激！

Answer 1

获取内容的高度然后将其应用到背景div:

<script type="text/javascript">
$(document).ready(function(){
    var heightPanel = $('#tab_slide_include').height();
    $('#tab_slide_background').height(heightPanel);
});
</script>

加载 jQuery 文件后添加此代码。我希望你知道你在哪里使用了 jQuery 文件。 ;)

Answer 2

好吧，放弃在侧边栏上放置滚动条了。

最终使用：

#tab_slide {
top: 50%
margin-top:-410px!important;
}

滑动选项卡的背景在滚动/溢出部分消失

Sliding tab's background disappears at the scrolling / overflow portion

css

background

overflow

scrollbar

slidingmenu