Html 固定侧导航条，带非固定标题，滚动后顶部留有间隙_Html_Css

Html 固定侧导航条，带非固定标题，滚动后顶部留有间隙

html css

Html 固定侧导航条，带非固定标题，滚动后顶部留有间隙,html,css,Html,Css,我正在处理的页面有标题、侧导航控件（固定），当然还有内容我遇到的问题是，如果内容足够长，足以让用户滚动，固定侧导航条保持固定，但在其上方留下一个与标题大小相同的间隙这似乎应该是一个简单的修复，我可能只是看了一些东西。如果可能的话，我更喜欢使用纯css或者没有jQuery的纯js ，可能必须使“结果”区域变宽才能看到侧导航 <body> <nav> ... </nav> <div class="wrapper"> <div clas

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

我遇到的问题是，如果内容足够长，足以让用户滚动，固定侧导航条保持固定，但在其上方留下一个与标题大小相同的间隙

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

，可能必须使“结果”区域变宽才能看到侧导航

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

不能只使用CSS。以下是Javascript（使用jQuery）：

$（窗口）。滚动（函数（）{
var scrollTop=$（窗口）.scrollTop（）；
如果（scrollTop您应该做的是在滚动到侧边栏顶部之前使元素绝对定位，那么一旦您达到该滚动点，将侧边栏粘贴到窗口顶部
您可以通过测量标题/导航栏的高度或内容区域开始位置的注释来实现这一点，一旦用户滚动超过该点，将类应用于侧栏，使其固定

$sidebar=$（“#sidebar wrapper”）；
$（窗口）。滚动（函数（）{
if（$（窗口）.scrollTop（）>=$（“#页面内容包装器”）.offset（）.top）{
$sidebar.addClass（'fixed'）；
}否则{
$sidebar.removeClass（'fixed'）；
}
})
正文{
溢出x：隐藏；
}
/*切换样式*/
navbar先生{
高度：70像素；
保证金：0；
}
#包装纸{
左侧填充：0；
-webkit过渡：所有0.5s轻松；
-moz过渡：所有0.5s轻松；
-o型过渡：所有0.5s的轻松度；
过渡：所有0.5s缓解；
}
#边栏包装{
z指数：1000；
位置：绝对位置；
左：250px；
宽度：0；
顶部：自动；
身高：100%；
左边距：-250px；
溢出y：自动；
背景:#f5；
右边框：1px实心#ccc；
-webkit过渡：所有0.5s轻松；
-moz过渡：所有0.5s轻松；
-o型过渡：所有0.5s的轻松度；
过渡：所有0.5s缓解；
}
#侧栏包装器。已修复{
位置：固定；
排名：0；
}
#页面内容包装器{
宽度：100%；
位置：绝对位置；
填充：15px；
}
/*边栏样式*/
.侧边栏导航{
位置：绝对位置；
排名：0；
宽度：250px；
保证金：0；
填充：0；
列表样式：无；
}
.侧边栏导航李{
文本缩进：20px；
线高：40px；
}
.侧边栏导航李a{
显示：块；
文字装饰：无；
颜色：3572b0；
}
.侧边栏导航李a：悬停{
文字装饰：无；
颜色：#204469；
背景：#dedede；
}
.侧边栏导航李a：激活，
.侧边栏导航李a：焦点{
文字装饰：无；
}
.sidebar nav>.sidebar品牌{
高度：65px；
字号：18px；
线高：60px；
}
.sidebar nav>.sidebar品牌a{
颜色：#999999；
}
.sidebar nav>.sidebar品牌a:悬停{
颜色：#fff；
背景：无；
}
@介质（最小宽度：768px）{
#包装纸{
左侧填充：250px；
}
#边栏包装{
宽度：250px；
}
#页面内容包装器{
填充：20px；
位置：相对位置；
}
}

导航栏标题
















所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
你真的应该用谢谢，我来看看
#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;
}

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