Home/ Questions/Q 8944777
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T12:05:55+00:00

Here’s what I would like to see on my website. A table with the

  • 0

Here’s what I would like to see on my website. A table with the width of the body, and three columns: 20%, 70%, 10%. As the browser window resizes, so does the table, and so do the columns of the table change their respective width.

The left column (the 20% width one) contains a DIV element, and that contains some text:

<body style="width:100%;">
 <table style="width:100%;">
  <tr>
   <td style="width:20%">
    <div style="position:relative;">
     Here goes some text.  This is a lot of text and usually should wrap around inside of the DIV element.
    </div>
    ...
  </tr>
 </table>
</body>

This all works just fine, wrapping and all. Now when the user scrolls the page down, the DIV element and its content scrolls up and out of the window.

What I want to do is to “fix” the DIV to the top of the browser before it leaves the visible area. When the user scrolls up again, the DIV should detach from the top of the browser and resume its normal position. The end effect is that the DIV either scrolls around inside of the visible area, or attach to the top of the browser otherwise. This is implemented with a simple Javascript callback that I attached to the onscroll event, which changes the position between fixed and relative. Works fine too.

Now the only thing that I noticed is that the width of the DIV changes! It is equal to the width of the parent TD as long as it scrolls along and as long as the DIV’s position is relative. The moment the Javascript callback changes the position to fixed the width of the DIV changes and overflows into the neighboring table column.

How can I contain the dimensions of the DIV?

Thanks 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Thanks @abelito for the hint 🙂 Turns out that the solution is a little easier than this. I do need to change the width of the DIV element when I change its position, but since the TD has a 20% width, all I have to do is to toggle the width of the DIV between 20% and 100% depending on its position value. Here is the Javascript which works:

    var div_is_sticky = false;

window.onscroll = function() {
  var y = window.scrollY;
  if (y >= 250) {
    if (div_is_sticky) {
      // Do nothing.
    }
    else {
      var div = document.getElementById("submenudiv");

      div.style.position = "fixed";
      div.style.width = "20%";

      div_is_sticky = true;
    }
  }
  else if (y < 250) {
    if (div_is_sticky) {
      var div = document.getElementById("submenudiv");

      div.style.position = "relative";
      div.style.width = "100%";

      div_is_sticky = false;
    }
    else {
      // Do nothing.
    }
  }
}

    Thanks!

    • 0