Member Avatar for ihatestarch

I'm working on a project and it uses JavaScript and CSS. I don't know a thing about JavaScript and I know a little CSS. Here's the problem:

I have a page that has a list of links on the left side and when you mouse over them, the contents appear on the right side. I put the contents in a fixed position using CSS so that when you scroll down the list of links (there is a scroll bar on the right side of the page), the content stays in place.

I did this because the content would remain at the top of the page while you scrolled down the list of links and eventually was not visible. Using the CSS position:fixed, the content stays in that fixed position relative to the browser. But when you scroll down the web browser, the content floats over or eventually out of the box still in it's fixed position from the browser.

What could I use in JavaScript to prevent this from happening?

Edited by ihatestarch because: n/a
  • 2 Contributors
  • 4 Replies
  • 132 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by ihatestarch

Dani AI

Generated

— the issue is that position: fixed pins an element to the viewport, so it will visually "escape" the surrounding box when the page scrolls. was correct that making the parent fixed will keep everything together, but that changes the whole container behavior. Two safer approaches that keep the content inside its box while keeping it visible during scrolling are (1) CSS position: sticky (preferred when supported) and (2) a small JavaScript scroll handler that switches between absolute and fixed while respecting the container bounds.

CSS (cleanest, modern browsers):

.content-panel {
  position: -webkit-sticky;
  position: sticky;
  top: 10px; /* stays 10px from viewport top while inside parent */
}

Sticky keeps the element in normal flow until it hits the top offset, then it becomes fixed — but it will remain constrained by its ancestor (it will not float outside the parent). See MDN for details: position: sticky.

JavaScript fallback (works where sticky isn’t available or you need fine control). Key points: ancestor must be position: relative so absolute anchors to it; measure with getBoundingClientRect(); throttle with requestAnimationFrame; recompute on resize and after content injection.

(function(){
  var container = document.getElementById('container'),
      panel = document.getElementById('panel'),
      offset = 10;

  function update(){
    var c = container.getBoundingClientRect(),
        pH = panel.offsetHeight;

    if (c.top + offset <= 0 && c.bottom - offset > pH) {
      panel.style.position = 'fixed';
      panel.style.top = offset + 'px';
      panel.style.left = container.getBoundingClientRect().left + 'px';
      panel.style.width = container.getBoundingClientRect().width + 'px';
    } else if (c.top + offset > 0) {
      panel.style.position = 'absolute';
      panel.style.top = '0';
      panel.style.left = '';
      panel.style.width = '';
    } else {
      panel.style.position = 'absolute';
      panel.style.top = (container.offsetHeight - pH) + 'px';
    }
  }

  var ticking = false;
  window.addEventListener('scroll', function(){
    if (!ticking) {
      window.requestAnimationFrame(function(){ update(); ticking = false; });
      ticking = true;
    }
  });
  window.addEventListener('resize', update);
  update();
})();

Troubleshooting: set a fixed width when switching to fixed (it is removed from the flow), ensure z-index is correct, and if your left list scrolls inside a scrollable container (not window), attach the listener to that container. If server-side content changes height after load, call the update routine after injection. For reference on measurements: getBoundingClientRect.

Recommended Answers

All 4 Replies

Member Avatar for almostbob

in css, fix the content box, instead of the content, the content will inherit the position of the parent box, and stay put, inside the box

Member Avatar for ihatestarch

The content is put into that content box by calling some server-side script. I can't get rid of the content div/box.

Member Avatar for almostbob

again, style the content box in css, as position:fixed; do not, aa, where is the ignore button I'm to old for this

Member Avatar for ihatestarch

again, style the content box in css, as position:fixed; do not, aa, where is the ignore button I'm to old for this

No need to be rude as I'm still in the learning process. I thought this forum was about helping others from all walks of life. I didn't realize you had to be an expert to get help. In my original post I mention that I use the CSS fixed position. In any case, I need to use javaScript, because my trainer insist so that I can have exposure to it. You know . . . to learn.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.