CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Nutic
Nutic

Reputation: 1437

Fixed header while scroll

I have the header of a table in the middle of a page, but since the page is huge, I want to fix the header to the top of browser while I scroll down for the page...

So my question is: How do I set header to be normal, until the user scrolls down and the top border of header touches the browser border, where it should stay fixed on that position, no matter how much further down the user scrolls?

Upvotes: 2

Views: 31465

Answers (7)

Stefan Pintilie
Stefan Pintilie

Reputation: 705

Here is a full working version using fixed headers, footers and columns!

Apply the classes for position relative, very important, otherwise the fixed column will overlap the header and footer, then define the classes at the table level where needed: "sticky-table"(mandatory), "sticky-header", "sticky-column", "sticky-footer", than call function "applyStickyHeaders". That's all!

$(function(){
    applyStickyHeaders();
});

Full example:

https://jsfiddle.net/pintilies/6zLyxewg/4/

Tested in IE, FireFox and Chrome.

Upvotes: 0

Anup
Anup

Reputation: 3353

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

Upvotes: 0

siddharth gupta
siddharth gupta

Reputation: 305

for keeping the position fixed of any block element,you need to use the absolute or the fixed property in the display attribute of style,but dont forget to give enough space and break to the top elements otherwise it will go under the header section.

Upvotes: 0

Chris Like
Chris Like

Reputation: 280

You're looking for a horizontally oriented "sticky box" that follows you down the page as you scroll.

Here is a walkthrough that explains how to create this effect for a sidebar: http://css-tricks.com/scrollfollow-sidebar/

I modified the code to work with a generic example that spans the width of the page:

HTML:

<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>​

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

});​

​This will animate the header block into view when you scroll beyond where it originally appears.

jsFiddle here

Upvotes: 2

Jibi Abraham
Jibi Abraham

Reputation: 4696

Let me explain as to how this could be done.

Steps

  1. Find your table header, and save its position
  2. Add a listener to the window's scroll event.
  3. Check the window scroll against your table header position
    1. If the position < window scroll - add a class to fix the table header
    2. Else, reset the css to behave like a normal header.

I've posted a fiddle that you can find here.

Code sample

HTML

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

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

​

Upvotes: 7

Shailender Arora
Shailender Arora

Reputation: 7778

I hope you are looking like this Header Fix 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;
}

Upvotes: 0

Vainglory07
Vainglory07

Reputation: 5273

you may try to enclose the bottom elements under the header in one div then add class to that div set overflow to auto

Upvotes: 0

Related Questions