CSS Fixed - alternative way to keep an HTML Element in place

Question

I want to create a web page that has a section at the top that contains the headings, then a section below that contains the data. I then want the headings to stay visible and the data to be able to scroll in the same way you can lock a row in Excel.

<div id="heading">This is my Heading</div>
<div id="data">
   <a>1st line of Data</a>
   <a>2nd line of Data</a>
</div>

Now I know if in my css I set #heading { position: fixed; top: 0px; left: 0px } then my heading will stay where it is and my data can scroll underneath it. But is there another way of doing this?

The reason I want to find a different way is I have a legacy app that uses Frames (yes I know all the reasons not to - but if any of you have had a conversation with your boss where you explain that the fix for a tiny bug is a complete re-write and he/she say's yeah go for it, then I want to come work with you!) and we have Fixed elements in the frames, but if the Frame is set to zero size (closed) then reopened again they just can't be seen in Safari on a mac. The elements are still in the DOM, they should be visible, even their tooltips can be seen and their click events work too.

So after many hours of trying to get them to display I figure it's worth looking at an alternative to the css fixed.

Answer 1

One option is to use absolute instead of fixed. Other solution is to scroll only inner content:

#data {
  max-height: 150px;
  overflow: auto;
}

<div id="heading">This is my Heading</div>
<div id="data">
  <a>1st line of Data</a>
  <a>2nd line of Data</a>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in lobortis dolor. Mauris dictum dui non tristique pharetra. Ut efficitur neque vitae consequat ullamcorper. Aenean convallis velit urna, nec convallis lectus interdum sit amet. Nullam
    quis vulputate eros. Aenean tincidunt laoreet urna, vel finibus metus tempor sagittis. Fusce eget faucibus felis. Sed tempus arcu nec egestas feugiat. Pellentesque est nulla, scelerisque nec porta vitae, suscipit at mauris. Sed pulvinar ullamcorper
    nisi, sit amet euismod leo. Etiam facilisis pharetra dui. Nulla a vulputate purus. Phasellus fringilla velit id ex luctus faucibus. Vivamus laoreet, eros sit amet ornare elementum, eros dolor sollicitudin lorem, non vehicula tortor sapien vitae sem.
    Fusce et augue ex. Aliquam aliquet mauris mattis neque ornare interdum. Donec sed consequat massa. Praesent sem diam, placerat eu arcu sed, euismod auctor est. Pellentesque fringilla, lorem ac molestie consequat, libero augue consectetur lacus, sed
    accumsan ex leo et velit. In quis rhoncus est, sit amet dignissim nibh. Aliquam malesuada bibendum erat, vitae rutrum dolor sagittis eu. Cras in iaculis sapien. Ut ultricies non felis eu cursus. Curabitur facilisis lacus sit amet lacus vulputate posuere.
    Mauris id tellus ultricies, maximus justo vitae, ornare sem.
  </p>
</div>

Answer 2

This makes it absolute and changes TOP value when scrolling the page. Not the best solution, but works:

$(document).ready(function(){
    $(window).scroll(function(){
        $("#heading").css("top", $(window).scrollTop());
    })
})

#heading{
  background: red;
  z-index: 100;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="heading">This is my Heading</div>
<div id="data">
   <p>1st line of Data</p>
   <p>2nd line of Data</p>
     <p>1st line of Data</p>
   <p>2nd line of Data</p>
     <p>1st line of Data</p>
   <p>2nd line of Data</p>
     <p>1st line of Data</p>
   <p>2nd line of Data</p>
     <p>1st line of Data</p>
   <p>2nd line of Data</p>
     <p>1st line of Data</p>
   <p>2nd line of Data</p>
     <p>1st line of Data</p>
   <p>2nd line of Data</p>
     <p>1st line of Data</p>
   <p>2nd line of Data</p>
     <p>1st line of Data</p>
   <p>2nd line of Data</p>
     <p>1st line of Data</p>
   <p>2nd line of Data</p>
     <p>1st line of Data</p>
   <p>2nd line of Data</p>
</div>