How to keep the header static always on top while scrolling

Question

How would I go about keeping my header from scrolling with the rest of the page  I thought about utilizing frame-sets and iframes  just wondering if there is a easier and more user friendly way  what would be the best-practice for doing this

User · Answer

x000D   x000D   header   x000D    position  fixed  x000D    top  0  x000D    left  0  x000D    width  100   x000D    height  88px  x000D    z-index  10  x000D    background   eeeeee  x000D    -webkit-box-shadow  0 7px 8px rgba 0  0  0  0 12   x000D    -moz-box-shadow  0 7px 8px rgba 0  0  0  0 12   x000D    box-shadow  0 7px 8px rgba 0  0  0  0 12   x000D    x000D   x000D   header  content-text   x000D    text-align  center  x000D    padding  15px 20px  x000D    x000D   x000D   page  content-container   x000D    margin  100px auto  x000D    width  975px  x000D    padding  30px  x000D    x000D   lt div class  header  gt  x000D     lt h1 class  header  content-text  gt  x000D      Header content will come here x000D     lt  h1 gt  x000D   lt  div gt  x000D   lt div class  page  content-container  gt  x000D     lt div style  height 600px   gt  x000D       lt a href  http   imgur com k9hz3  gt  x000D         lt img src  http   i imgur com k9hz3 jpg  title  Hosted by imgur com  alt      gt  x000D       lt  a gt  x000D     lt  div gt  x000D     lt div style  height 600px   gt  x000D       lt a href  http   imgur com TXuFQ  gt  x000D         lt img src  http   i imgur com TXuFQ jpg  title  Hosted by imgur com  alt      gt  x000D       lt  a gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Instead of working with positioning and padding/margin and without knowing the header's size, there's a way to keep the header fixed by playing with the scroll.

See the this plunker with a fixed header:

<html lang="en" style="height: 100%">
<body style="height: 100%">
<div style="height: 100%; overflow: hidden">
  <div>Header</div>
  <div style="height: 100%; overflow: scroll">Content - very long Content...

The key here is a mix of height: 100% with overflow.

See a specific question on removing the scroll from the header here and answer here.

User · Answer

In modern  supported browsers  you can simply do that in CSS with -   header    position  sticky    top  0      Note  The HTML structure is important while using position  sticky  since it s make the element sticky relative to the parent  And the sticky positioning might not work with a single element made sticky within a parent    Run the snippet below to check a sample implementation    x000D   x000D  main  x000D  padding  0  x000D    x000D  header  x000D  position  sticky  x000D  top 0  x000D  padding 40px  x000D  background  lightblue  x000D  text-align  center  x000D    x000D   x000D  content  gt  div   x000D  height  50px  x000D    x000D   lt main gt  x000D   lt header gt  x000D  This is my header x000D   lt  header gt  x000D   lt content gt  x000D   lt div gt Some content 1 lt  div gt  x000D   lt div gt Some content 2 lt  div gt  x000D   lt div gt Some content 3 lt  div gt  x000D   lt div gt Some content 4 lt  div gt  x000D   lt div gt Some content 5 lt  div gt  x000D   lt div gt Some content 6 lt  div gt  x000D   lt div gt Some content 7 lt  div gt  x000D   lt div gt Some content 8 lt  div gt  x000D   lt  content gt  x000D   lt  main gt  x000D   x000D   x000D

User · Answer

If you can use bootstrap3 then you can use css  navbar-fixed-top  also you need to add below css to push your page content down  body      margin-top 100px

User · Answer

After looking through all the answers  I found a slightly different way with minimum CSS and no JS  only the height of the header needs to be set correctly in  content  in this case 60px  CSS    header     position  fixed    width  100     top  0    z-index  10     content     margin-top  60px    z-index 1      HTML    lt body gt     lt div id  header  style  background-color GRAY  text-align center  border-bottom 1px SOLID BLACK  color WHITE  line-height 50px  font-size 40px  gt       My Large Static Header    lt  div gt     lt div id  content  gt        lt  -- All page content here -- gt     lt  div gt   lt  body gt

User · Answer

I personally needed a table with both the left and top headers visible at all times  Inspired by several articles  I think I have a good solution that you may find helpful   This version does not have the wrapping problem that other soltions have with floating divs or flexible auto sizing of columns and rows    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt       lt title gt  lt  title gt       lt script language  javascript  type  text javascript  src   Scripts jquery-1 7 2 min js  gt  lt  script gt       lt script language  javascript  type  text javascript  gt             Handler for scrolling events         function scrollFixedHeaderTable                 var outerPanel        outerPanel                var cloneLeft        cloneLeft                var cloneTop        cloneTop                cloneLeft css    margin-top   -outerPanel scrollTop                   cloneTop css    margin-left   -outerPanel scrollLeft                          function initFixedHeaderTable                 var outerPanel        outerPanel                var innerPanel        innerPanel                var clonePanel        clonePanel                var table        table                   We will clone the table 2 times  For the top rowq and the left column               var cloneLeft        cloneLeft                var cloneTop        cloneTop                var cloneTop        cloneTopLeft                   Time to create the table clones             cloneLeft   table clone                cloneTop   table clone                cloneTopLeft   table clone                cloneLeft attr  id     cloneLeft                cloneTop attr  id     cloneTop                cloneTopLeft attr  id     cloneTopLeft                cloneLeft css                   position   fixed                    pointer-events    none                   top  outerPanel offset   top                   z-index   1    keep lower than top-left below                             cloneTop css                   position   fixed                    pointer-events    none                   top  outerPanel offset   top                   z-index   1    keep lower than top-left below                             cloneTopLeft css                   position   fixed                    pointer-events    none                   top  outerPanel offset   top                   z-index   2    higher z-index than the left and top to make the top-left header cell logical                                Add the controls to the control-tree             clonePanel append cloneLeft               clonePanel append cloneTop               clonePanel append cloneTopLeft                  Keep all hidden  We will make the individual header cells visible in a moment             cloneLeft css   visibility   hidden                  cloneTop css   visibility   hidden                  cloneTopLeft css   visibility   hidden                     Make the lef column header cells visible in the left clone                  cloneLeft td  hdr   row   css                   visibility   visible                                  Make the top row header cells visible in the top clone                  cloneTop td  hdr   col   css                   visibility   visible                                  Make the top-left cell visible in the top-left clone                  cloneTopLeft td  hdr   col   row   css                   visibility   visible                                  Clipping  First get the inner width height by measuring it  normal innerWidth did not work for me              var helperDiv       lt div style  positions  absolute  top  0  right  0  bottom  0  left  0  height  100    gt  lt  div gt                 outerPanel append helperDiv               var innerWidth   helperDiv width                var innerHeight   helperDiv height                helperDiv remove       because we dont need it anymore  do we                 Make sure all the panels are clipped  or the clones will extend beyond them             outerPanel css   clip   rect 0px     String outerPanel width       px     String outerPanel height       px 0px                      Clone panel clipping to prevent the clones from covering the outerPanel s scrollbars  this is why we use a separate div for this              clonePanel css   clip   rect 0px     String innerWidth     px     String innerHeight     px 0px                        Subscribe the scrolling of the outer panel to our own handler function to move the clones as needed                   outerPanel   scroll scrollFixedHeaderTable                         document  ready function                  initFixedHeaderTable                      lt  script gt       lt style type  text css  gt                          clip  rect font-family  Arial              font-size  16px              margin  0              padding  0                       outerPanel               margin  0px              padding  0px              position  absolute              left  50px              top  50px              right  50px              bottom  50px              overflow  auto              z-index  1000                       innerPanel               overflow  visible              position  absolute                       clonePanel               overflow  visible              position  fixed                     table                      td               white-space  nowrap              border-right  1px solid  000              border-bottom  1px solid  000              padding  2px 2px 2px 2px                     td  hdr               color  Blue              font-weight  bold                    td  hdr   row               background-color   eee              border-left  1px solid  000                    td  hdr   col               background-color   ddd              border-top  1px solid  000                 lt  style gt   lt  head gt   lt body gt       lt div id   outerPanel  gt           lt div id   innerPanel  gt               lt div id   clonePanel  gt  lt  div gt               lt table id   table  border  0  cellpadding  0  cellspacing  0  gt                   lt thead id   topHeader  style  background-color  White   gt                       lt tr class  row  gt                           lt td class   hdr   col   row  gt                               amp nbsp                           lt  td gt                           lt td class   hdr   col  gt                              TOP HEADER                          lt  td gt                           lt td class   hdr   col  gt                              TOP HEADER                          lt  td gt                           lt td class   hdr   col  gt                              TOP HEADER                          lt  td gt                           lt td class   hdr   col  gt                              TOP HEADER                          lt  td gt                           lt td class   hdr   col  gt                              TOP HEADER                          lt  td gt                           lt td class   hdr   col  gt                              TOP HEADER                          lt  td gt                           lt td class   hdr   col  gt                              TOP HEADER                          lt  td gt                           lt td class   hdr   col  gt                              TOP HEADER                          lt  td gt                           lt td class   hdr   col  gt                              TOP HEADER                          lt  td gt                           lt td class   hdr   col  gt                              TOP HEADER                          lt  td gt                           lt td class   hdr   col  gt                              TOP HEADER                          lt  td gt                           lt td class   hdr   col  gt                              TOP HEADER                          lt  td gt                           lt td class   hdr   col  gt                              TOP HEADER                          lt  td gt                           lt td class   hdr   col  gt                              TOP HEADER                          lt  td gt                           lt td class   hdr   col  gt                              TOP HEADER                          lt  td gt                           lt td class   hdr   col  gt                              TOP HEADER                          lt  td gt                           lt td class   hdr   col  gt                              TOP HEADER                          lt  td gt                           lt td class   hdr   col  gt                              TOP HEADER                          lt  td gt                           lt td class   hdr   col  gt                              TOP HEADER                          lt  td gt                           lt td class   hdr   col  gt                              TOP HEADER                          lt  td gt                           lt td class   hdr   col  gt                              TOP HEADER                          lt  td gt                           lt td class   hdr   col  gt                              TOP HEADER                          lt  td gt                           lt td class   hdr   col  gt                              TOP HEADER                          lt  td gt                           lt td class   hdr   col  gt                              TOP HEADER                          lt  td gt                       lt  tr gt                   lt  thead gt                   lt tbody gt                       lt tr class  row  gt                           lt td class   hdr   row  gt                              MY HEADER COLUMN                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                       lt  tr gt                       lt tr class  row  gt                           lt td class   hdr   row  gt                              MY HEADER COLUMN                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                           lt td class  col  gt                              The quick brown fox jumps over the lazy dog                           lt  td gt                       lt  tr gt                   lt  tbody gt               lt  table gt           lt  div gt           lt div id   bottomAnchor  gt           lt  div gt       lt  div gt   lt  body gt   lt  html gt

User · Answer

Use position  fixed on the div that contains your header  with something like   header     position  fixed      content     margin-top  100px      In this example  when  content starts off 100px below  header  but as the user scrolls   header stays in place  Of course it goes without saying that you ll want to make sure  header has a background so that its content will actually be visible when the two divs overlap  Have a look at the position property here  http   reference sitepoint com css position

User · Answer

here is one with css   jquery  javascript  solution   here is demo link  Demo    html   lt div id  uberbar  gt       lt a href   top  gt Top of Page lt  a gt       lt a href   bottom  gt Bottom of Page lt  a gt    lt  div gt     css    uberbar           border-bottom 1px solid  eb7429       background  fc9453       padding 10px 20px       position fixed       top 0       left 0       z-index 2000       width 100        jquery    document  ready function          function               settings         var fadeSpeed   200  fadeTo   0 5  topDistance   30          var topbarME   function         uberbar   fadeTo fadeSpeed 1      topbarML   function         uberbar   fadeTo fadeSpeed fadeTo              var inside   false            do           window  scroll function                 position     window  scrollTop                if position  gt  topDistance  amp  amp   inside                      add events                 topbarML                        uberbar   bind  mouseenter  topbarME                       uberbar   bind  mouseleave  topbarML                   inside   true                            else if  position  lt  topDistance                   topbarME                        uberbar   unbind  mouseenter  topbarME                       uberbar   unbind  mouseleave  topbarML                   inside   false

[javascript] How to keep the header static, always on top while scrolling?

The answer is

Examples related to javascript

Examples related to html

Examples related to css

Tags