我在页面中间有一个表格的标题,但由于页面很大,我想在向下滚动页面时将标题修复到浏览器的顶部...
所以我的问题是:如何将标题设置为正常,直到用户向下滚动并且标题的顶部边框触及浏览器边框,无论用户向下多远,它都应保持固定在该位置滚动?
答案 0 :(得分:5)
让我解释一下如何做到这一点。
position
scroll
事件中添加一个监听器。我发布了you can find here的小提琴。
<div class='lots_of_stuff_in_here'> ... </div>
<table>
<thead id='my_fixable_table_header'>
<tr>
<th>My awsesome header number 1</th>
<th>My awsesome header number 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content</td>
<td>Content</td>
</tr>
// much more content
</tbody>
</table>
// Just so you get the idea behind the code
var myHeader = $('#my_fixable_table_header');
myHeader.data( 'position', myHeader.position() );
$(window).scroll(function(){
var hPos = myHeader.data('position'), scroll = getScroll();
if ( hPos.top < scroll.top ){
myHeader.addClass('fixed');
}
else {
myHeader.removeClass('fixed');
}
});
function getScroll () {
var b = document.body;
var e = document.documentElement;
return {
left: parseFloat( window.pageXOffset || b.scrollLeft || e.scrollLeft ),
top: parseFloat( window.pageYOffset || b.scrollTop || e.scrollTop )
};
}
答案 1 :(得分:2)
您正在寻找一个水平导向的“粘性框”,在您滚动时跟随您向下移动。
以下是演示如何为侧边栏创建此效果的演练:http://css-tricks.com/scrollfollow-sidebar/
我修改了代码以使用跨越页面宽度的通用示例:
<div class="wrapper">
<div class="head">HEAD</div>
<div class="header">Table Header</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
.wrapper {
border:1px solid red;
}
.head{
height: 100px;
background: gray;
}
.header {
background:red;
height:100px;
left:0;
right:0;
top:0px;
margin-top:100px;
position:absolute;
}
.content {
background:green;
height:1000px;
}
.footer {
background:blue;
height:100px;
}
$(function() {
var $sidebar = $(".header"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 0;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
top: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
top: 0
});
}
});
});
当您滚动到最初显示的位置时,这会将标题块设置为视图。
答案 2 :(得分:0)
您可以尝试将底部元素包含在一个div中的标题下,然后将该类添加到该div设置溢出到自动
答案 3 :(得分:0)
我希望你看起来像这个标题修复Demo
<强> HTML
<div class="wrapper">
<div class="header">Header Fix</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
<强> CSS
.wrapper {
border:1px solid red;
}
.header {
background:red;
height:100px;
position:fixed;
left:0;
right:0;
top:0;
}
.content {
background:green;
height:1000px;
}
.footer {
background:blue;
height:100px;
}
答案 4 :(得分:0)
为了保持任何块元素的位置固定,你需要在样式的display属性中使用绝对或固定属性,但不要忘记给出足够的空间并打破顶部元素,否则它将在标题下面部分。
答案 5 :(得分:0)
$(window).scroll(function() {
if ($(this).scrollTop() > 100){
$('header').addClass("sticky");
}
else{
$('header').removeClass("sticky");
}
});
的CSS:
header.sticky {
font-size: 24px;
line-height: 48px;
height: 48px;
background: #efc47D;
text-align: left;
padding-left: 20px;
}
答案 6 :(得分:0)
这是使用固定页眉,页脚和列的完整工作版本!
应用相对位置的类,这一点非常重要,否则固定列将使页眉和页脚重叠,然后在需要的表级别定义这些类:“ sticky-table”(强制性),“ sticky-header”, “粘性列”,“粘性页脚”,而不是调用函数“ applyStickyHeaders”。仅此而已!
$(function(){
applyStickyHeaders();
});
完整示例:
https://jsfiddle.net/pintilies/6zLyxewg/4/
在IE,FireFox和Chrome中进行了测试。