Question

即使用户向右滚动页面，我也需要页面中的某些内容保持在屏幕上的位置。

我的HTML非常简单：

<head runat="server">
    <title>Bla</title>     
</head>

<body>
    <!--header start-->
    <header class="header dark-bg"></header>
    <!--header end-->
    <!--sidebar start-->
    <aside>
        <div id="sidebar" class="nav-collapse ">
            <!-- sidebar menu start-->
            <ul class="sidebar-menu"></ul>
            <!-- sidebar menu end-->
        </div>
    </aside>
    <section id="container" class="">
        <!--main content start-->
        <section id="main-content">
            <section class="wrapper">
                <!--overview start-->
                <div class="row">
                    <div class="col-lg-12">
                            <h3 class="page-header"><i class="fa fa-laptop"></i> Dashboard</h3>

                        <ol class="breadcrumb">
                            <li><i class="fa fa-home"></i><a href="/Home">Home</a>

                            </li>
                            <li><i class="fa fa-laptop"></i>Dashboard</li>
                        </ol>
                    </div>
                </div>
            </section>
        </section>
</body>

看看： https://jsfiddle.net/2wn8qgyb/

向右滚动时，我希望＆＃34; Dashboard＆＃34;和＆＃34;家庭/仪表板＆＃34;文字不会消失并停滞不前。我希望用户可以选择单击它而不向后滚动。

Answer 1

在您的html中，为此div <div class="col-lg-12">添加一个额外的类名，它现在应该看起来像<div class="my-nav-bar col-lg-12">

之后，只需将其添加到您的css文件中：

.my-nav-bar{position:fixed;}

这是一个有效的Demo

Answer 2

将此添加到您的css：

.page-header {
    position:fixed;
}
.breadcrumb {
    position:fixed;
}

Answer 3

修正了你不想消失的div的位置

.div
{
position:fixed;
}

即使将页面滚动到另一个部分，也会在页面上显示文本

3 个答案: