Fix position if row is below a certain height

Question

Is it possible to fix the position of a table, such that it "scrolls along" with the page, but only after a certain value?

What I'm trying to achieve is similar to the header on this site: http://tf2trends.com/ (click show all, then scroll down)

score 1 · Accepted Answer · edited May 23 '17 at 11:53

1

This can be done using JavaScript and CSS with any type of element:

Have a div cling to top of screen if scrolled down past it

http://css-tricks.com/snippets/jquery/persistant-headers-on-tables/

edited May 23 '17 at 11:53

Community

1
1

answered Jun 21 '12 at 04:14

Stecman

2,890
20
18

score 0 · Answer 2 · edited Feb 20 '17 at 22:13

0

Yes, you can easily achieve this functionality by using some CSS class and jQuery or JavaScript programming.

You have to call a function in a certain scroll value, which you will get easily by jQuery and then change the CSS for your table or div which is called position:fixed;top:0;

edited Feb 20 '17 at 22:13

marc_s

732,580
175
1,330
1,459

answered Jun 21 '12 at 04:15

Sudip Pal

2,041
1
13
16

astro boy · Answer 3 · 2012-06-21T04:26:56.540

Try this:

//keep element in view
(function($)
{
    $(document).ready( function()
    {
        var elementPosTop = $('#floatguy').position().top;
        $(window).scroll(function()
        {
            var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
            //if top of element is in view
            if (wintop > elementPosTop)
            {
                //always in view
                $('#floatguy').css({ "position":"fixed", "top":"10px" });
            }
            else
            {
                //reset back to normal viewing
                $('#floatguy').css({ "position":"inherit" });
            }
        });
    });
})(jQuery);

html:

<div>
    Content before floating text<br/>
    Content before floating text<br/>
    Content before floating text<br/>
</div>
<div id="floatguy">
    <span>Floating Header</span>
</div>

<div id="longguy">
        Other text <br/>
        Other text <br/>
        Other text <br/>
</div>

jsFiddle example

score 0 · Answer 4 · answered Jun 21 '12 at 05:30

Here is the method used by the website referenced in the question, implemented without using frameworks (and with excessive comments to try to explain what's going on). This is not the best/easiest/simplest method to get the effect, but I hope it is useful to see that website's approach in pure js from a learning standpoint. (Only tested in Chrome 19.0 and Firefox 13.0, both on a mac.)

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <title>Table With Scrolling Head</title>
    <style type='text/css'>
      #scrollTable{
      margin-top:100px; /* not necessary for scrolling, just to give a little padding */
      }

      #scroller {
      z-index: 100; /* this number needs to be larger than any other z-index on the page */
      }
    </style>
  </head>
  <body>
    <table id='scrollTable'>
      <thead id='scroller'>
    <tr>
      <th>I don't leave the screen</th>
    </tr>
      </thead>
      <tbody>
    <tr><td>I do!</td></tr>
    <tr><td>I do!</td></tr>
    <!-- ... add more <tr><td>I do!</td></tr> lines to make the page long enough to scroll -->
    <tr><td>I do!</td></tr> 
      </tbody>
  </body>
<script type='text/javascript'>
function getDistFromTop(e){
    /* get the offset of element e from the top (including the offset of any elements it is nested in)*/
    y = e.offsetTop;
    e = e.offsetParent;
    while (e != null){
        y = y + e.offsetTop;
        e = e.offsetParent;            
    }
    return y;
}

function scroll() {
    var scroller = document.getElementById('scroller');
    var tab = document.getElementById('scrollTable');

    if (window.pageYOffset > getDistFromTop(tab)){ /* if the page has been scrolled farther than the distance the table is from the top... */
        scroller.style.position = 'fixed'; /* fix the position of scroller so it doesn't move with the page */
        scroller.style.top = '0px'; /* put scroller on the top of the page */
        tab.style.paddingTop = '20px'; /* add padding to the top of the table; this is done to make the table body stay where it is expected (otherwise it would move because scroller, the table header, has become fixed) */
    } else { /* if the page scrolls back so that the whole table is on the page, reset everything to their original values so the page behaves "normally" */
        scroller.style.position = 'relative'; 
        scroller.style.top = '';
        tab.style.paddingTop = '0px';
    }
}

window.onscroll = scroll;
</script>
</html>

Fix position if row is below a certain height

4 Answers4