滚动时固定标题

我在页面中间有一个表格的标题，但由于页面很大，我想在页面向下滚动页面时将标题修复到浏览器的顶部…

所以我的问题是：如何将标题设置为正常，直到用户向下滚动并且标题的顶部边框触及浏览器边框，它应该保持固定在该位置，无论用户滚动多远？

Answer 1

让我解释一下如何做到这一点。

脚步

1. 找到您的表头，并保存其position
2. 在窗口的scroll事件中添加一个监听器。
3. 检查窗口滚动表格标题位置
   1. 如果位置<窗口滚动 - 添加一个类来修复表头
   2. 否则，将css重置为正常标头。

我发布了一个你可以在这里找到的小提琴。

代码示例

HTML

 
 ... 
  // much more content 
 
 
 
My awsesome header number 1
 
My awsesome header number 2
 
 
 
 
 
Content
 
Content
 
  

使用Javascript

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

Answer 2

你正在寻找一个水平导向的“粘性盒子”，当你滚动时，它会跟随你。

这是一个演练，解释了如何为侧边栏创建此效果： http ： //css-tricks.com/scrollfollow-sidebar/

我修改了代码以使用跨越页面宽度的通用示例：

HTML：

 
 
HEAD
 
Table Header
 
Content
 
Footer
 
​ 

CSS：

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

jQuery的：

 $(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 }); } }); });​ 

当您滚动到最初出现的位置时，这会将标题块设置为视图。

jsFiddle在这里

Answer 3

您可以尝试将底部元素包含在一个div中的标题下，然后将该类添加到div设置溢出为auto

Answer 4

我希望你看起来像这个Header Fix Demo

HTML

 
 
Header Fix
 
Content
 
Footer
  

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

Answer 5

为了保持任何块元素的位置固定，你需要在样式的display属性中使用绝对或固定属性，但不要忘记给出足够的空间并打破顶部元素，否则它将在标题部分下面。

Answer 6

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