Question

我正在页面顶部创建一个粘性菜单，通常将其设置为固定位置。

然后我意识到在后台调整div的不透明度会很好看。

当我滚动浏览页面时，所有文本显示在div后面并且我不希望这样的问题开始出现问题。

我试图找出一种方法，只使用overflow-y滚动页面的一部分，但它需要一个固定的高度才能工作。

我被困住了。有什么建议吗？

这是我工作的页面：

http://in2apps.com/nowa/

我只需要滚动内容框div，但我不想给它一个固定的高度。

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>

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

编辑：

在此页面中，您可以在实施@ AlienWebguy解决方案后看到结果。

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

Answer 1

CSS ：

body {
    overflow : hidden;
}

content-box {
    overflow : scroll;
}

<强>的jQuery

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

Answer 2

使用此JQ插件：

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

然后像这样制作一个css类：

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

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

2 个答案: