Member Avatar for riahc3

Hello

I have a jQuery Thickbox window and I want to make it stick as far as possible to the top of the browser window, so the top is visible.

If the bottom is not visible, this (for now) is not a problem.

How can I do it?

  • 3 Contributors
  • 4 Replies
  • 191 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

Short answer: make the Thickbox container use viewport positioning (position: fixed) or, if the plugin is placing inline absolute values, override those with a small script after the box opens. This builds on ’s CSS suggestion and answers ’s clarification: the goal is to keep the Thickbox top edge inside the browser viewport.

Use CSS when possible. Replace the selector below with the actual Thickbox container discovered in devtools (as suggested):

/* replace .tb-container with the real selector */
.tb-container {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  margin: 0;
}

If the Thickbox plugin sets inline positioning (common for older modal scripts), run a short jQuery routine after the box appears to force the top into view. This works whether the plugin uses absolute or fixed positioning:

var $box = $('.tb-container'); // replace with actual selector

function stickTop() {
  if (!$box.length) return;
  if ($box.css('position') === 'fixed') {
    $box.css('top', 0);
  } else {
    $box.css('top', ($(window).scrollTop() + 8) + 'px'); // 8px gap
  }
}

// call this immediately after Thickbox opens; a small timeout can help
setTimeout(stickTop, 40);
$(window).on('resize scroll', stickTop);

Troubleshooting notes: use the browser devtools to confirm the container selector and whether the plugin writes inline styles. If an inline style keeps reappearing, run the JS after the plugin’s show callback or use a small interval until positioning stabilizes. Also check z-index (ensure the box sits above headers) and remove any centering margins the plugin adds (margin-top, negative offsets).

Recommended Answers

All 4 Replies

Member Avatar for Member #905211

Use CSS. You will want to set the display property to fixed (if you don't want it to scroll with the page) or absolute (if you do want it to scroll with the page). You will want to set the top property to 0.

Member Avatar for riahc3

hmmm....is there another way to do it/calculate it using margin top/bottom?

Member Avatar for Member #905211

Sure you could, but CSS would be the easiest and most accurate. Just you the developer tool bar (firebug, IE devtoolbar or Chrome's) to help you figure out the selector you need to use for the CSS.

Member Avatar for JorgeM

What do you mean by "so the top is visible"? The top of the thickbox or some other header on the top of the page?

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.