粘性顶部菜单具有透明度（仅滚动文档的一部分）

Question

I was creating a sticky menu on the top of the page setting it to a fixed position as usually. 我通常在页面顶部创建一个粘性菜单，将其设置为固定位置。

Then I realized that it would be nice to see the picture in the background adjusting the opacity of the div. 然后，我意识到在后台调整div的不透明度来查看图片会很好。

There started to appear the problems due to when I scroll through the page all the text is displayed behind the div and I don't want that. 由于当我滚动浏览页面时，所有文本都显示在div后面，因此开始出现问题，我不希望这样。

I was trying to figure out a way to scroll only a part of the page using overflow-y, but it needs a fixed height to work. 我试图找出一种使用溢出-y滚动页面的一部分的方法，但是它需要固定的高度才能工作。

I'm stuck. 我被卡住了。 Any suggestions? 有什么建议么？

This is the page where I'm working: 这是我正在工作的页面：

http://in2apps.com/nowa/ http://in2apps.com/nowa/

I need to scroll only the content-box div but I don't want to give it a fixed height. 我只需要滚动内容框div，但是我不想给它固定的高度。

The html code: html代码：

<!DOCTYPE html>
<html lang="es">
    <head>
    </head>
    <body style="background-image:url('img/1.jpg')">
        <div id="top-bar-box">
            <div id="top-bar">
                <div id="logo">
                    <a><img src="img/logo.png" alt="Logo"/></a>
                </div>
                <div id="top-menu">
                </div>
            </div>
        </div>
        <div id="content-box">
            <div id="content">
                <div class="icon"></div>
                <h1>Título Principal</h1>
                <h2>Título Secundario</h2>
                <h3>Subtítulo</h3>
                <p>... Text...</p>
            </div>
        </div>
    </body>
</html>

And the CSS of the DIVs: 以及DIV的CSS：

#top-bar-box {
    background-color: rgba(255, 255, 255, 0.5);
    color: #b20000;
    margin: 0 auto 20px auto;
    text-align: center;
    position: fixed;
    width: 100%;
    z-index: 1;
}

#top-bar {
    height: 120px;
    margin: 0 auto;
    max-width: 960px;
}

#content-box {
    position: relative;
    top: 140px;
    margin: 0 auto 20px auto;
}

#content {
    background-color: rgba(255, 255, 255, 0.8);
    margin: 0 auto;
    max-width: 940px;
    padding: 10px;
    border-radius: 10px;
}

Edited: 编辑：

In this page you can see the result after the implementation of @AlienWebguy's solution. 在此页面中，您可以看到实施@AlienWebguy解决方案后的结果。

http://in2apps.com/nowa/index4.php http://in2apps.com/nowa/index4.php

Answer 1

CSS : CSS ：

body {
    overflow : hidden;
}

content-box {
    overflow : scroll;
}

jQuery jQuery的

$('#content-box').css('height', ($(window).height() - 140) + 'px');

Answer 2

Use this JQ plugin: 使用此JQ插件：

http://bigspotteddog.github.io/ScrollToFixed/ http://bigspotteddog.github.io/ScrollToFixed/

Then make a css class like this for example: 然后例如创建一个这样的css类：

.filter.scroll-to-fixed-fixed {
background: #F2F4F5;
height: 65px;
padding-top: 20px;
}

粘性顶部菜单具有透明度（仅滚动文档的一部分）

问题描述

2 个解决方案

解决方案1
1 已采纳 2013-12-20 22:06:55

解决方案2
0 2013-12-20 22:13:32

粘性顶部菜单具有透明度（仅滚动文档的一部分）

问题描述

2 个解决方案

解决方案1 1 已采纳 2013-12-20 22:06:55

解决方案2 0 2013-12-20 22:13:32

解决方案1
1 已采纳 2013-12-20 22:06:55

解决方案2
0 2013-12-20 22:13:32