Question

我正在处理的页面有标题，侧面导航控件（固定），当然还有内容。

我遇到的问题是，如果内容足够长以使用户滚动，则固定侧导航栏保持固定但留下与其上方标题大小相等的间隙。

这似乎应该是一个简单的修复，我可能只是在寻找一些东西。如果可能的话，我更喜欢用纯css或没有jQuery的普通js。

fiddle example，可能必须让“结果”区域更宽才能看到侧面导航。

<body>
 <nav> ... </nav>
 <div class="wrapper">
  <div class="sidebar-wrapper">...</div>
  <div class="page-content-wrapper">...</div> 
 </div>
</body>

css

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    background: #f5f5f5;
    border-right: 1px solid #ccc;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#page-content-wrapper {
    width: 100%;
    position: absolute;
    padding: 15px;
}

Answer 1

仅限CSS无法完成。这是Javascript（使用jQuery）：

$(window).scroll(function() {
    var scrollTop = $(window).scrollTop();
    if (scrollTop <= 70)
        $('.sidebar-wrapper').css('top', 70 - scrollTop);
    else
        $('.sidebar-wrapper').css('top', 0);
});

Answer 2

你应该做的是在滚动到侧边栏的顶部之前使元素绝对定位，然后一旦你点击滚动点，将侧边栏粘贴到窗口的顶部。

您可以通过测量标题/导航栏的高度或内容区域开头的位置来做到这一点，并且一旦用户滚过该点，将类应用于侧栏以使其固定。

$sidebar = $('#sidebar-wrapper');

$(window).scroll(function() {
	if ($(window).scrollTop() >= $('#page-content-wrapper').offset().top) {
  	$sidebar.addClass('fixed');
  } else {
  	$sidebar.removeClass('fixed');
  }
})

body {
    overflow-x: hidden;
}

/* Toggle Styles */
.navbar{
  height: 70px; 
  margin: 0; 
}
#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#sidebar-wrapper {
    z-index: 1000;
    position: absolute;
    left: 250px;
    width: 0;
    top: auto;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    background: #f5f5f5;
    border-right: 1px solid #ccc;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#sidebar-wrapper.fixed {
  position: fixed;
  top: 0;
}

#page-content-wrapper {
    width: 100%;
    position: absolute;
    padding: 15px;
}
/* Sidebar Styles */

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-nav li {
    text-indent: 20px;
    line-height: 40px;
}

.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #3572b0;
}

.sidebar-nav li a:hover {
    text-decoration: none;
    color: #204469;
    background: #dedede;
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
    height: 65px;
    font-size: 18px;
    line-height: 60px;
}

.sidebar-nav > .sidebar-brand a {
    color: #999999;
}

.sidebar-nav > .sidebar-brand a:hover {
    color: #fff;
    background: none;
}

@media(min-width:768px) {
    #wrapper {
        padding-left: 250px;
    }

    #sidebar-wrapper {
        width: 250px;
    }
    #page-content-wrapper {
        padding: 20px;
        position: relative;
    }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<body>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <h1>Navbar header</h1>
        </div>
    </div>
</nav>
<div id="wrapper">
    <!-- Sidebar -->
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li>
                <a href="#">Dashboard</a>
            </li>
            <li>
                <a href="#">Shortcuts</a>
            </li>
            <li>
                <a href="#">Overview</a>
            </li>
            <li>
                <a href="#">Events</a>
            </li>
            <li>
                <a href="#">About</a>
            </li>
            <li>
                <a href="#">Services</a>
            </li>
            <li>
                <a href="#">Contact</a>
            </li>
        </ul>
    </div>
    <!-- /#sidebar-wrapper -->

    <!-- Page Content -->
    <div id="page-content-wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
                <div class="col-lg-12">
                    <h1>Content</h1>
                </div>
            </div>
        </div>
    </div>
    <!-- /#page-content-wrapper -->
</div>

</body>

固定的sidenav bar w /非固定标题在滚动后在顶部留下空隙

2 个答案: