Member Avatar for hrsht

Hey, I want my ads to float in the right sidebar as "Daniweb." On Daniweb the social sharing buttons and related posts are sticky, I want the same configuration for my website.

  • 4 Contributors
  • 5 Replies
  • 261 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by ellysdirectory

Dani AI

Generated

To reproduce DaniWeb’s sticky right-column behavior the cleanest route is CSS first, JS only as a fallback. Use position: sticky inside the sidebar container so the ad “sticks” at a top offset and remains restrained by its parent. Good diagnostics are already suggested by — use DevTools to watch computed styles while scrolling. is right that some sites still use a small script to switch positioning when needed; ’s float:right is for layout only and won’t create a sticky/fixed effect.

A minimal CSS-only pattern (widely supported) — make the sidebar the containing block and the ad sticky:

.sidebar { position: relative; /* container for absolute fallback */ }
.ad-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 20px;        /* distance from viewport top when stuck */
  width: 300px;     /* keep predictable width to avoid layout jumps */
}

If older browsers or a “stop before footer” limit is required, a small vanilla JS fallback works. Key ideas: detect container bounds, toggle fixed while there’s room, and fall back to absolute at the container bottom. Recalculate on resize.

(function(){
  var ad = document.querySelector('.ad-sticky');
  var container = ad && ad.parentElement;
  var offset = 20;
  function update(){
    var adH = ad.offsetHeight;
    var c = container.getBoundingClientRect();
    var a = ad.getBoundingClientRect();
    if (c.top < offset && c.bottom > adH + offset) {
      ad.style.position = 'fixed';
      ad.style.top = offset + 'px';
      ad.style.left = a.left + 'px';
      ad.style.width = ad.offsetWidth + 'px';
    } else if (c.bottom <= adH + offset) {
      ad.style.position = 'absolute';
      ad.style.top = (container.offsetHeight - adH) + 'px';
      ad.style.left = '';
      ad.style.width = '';
    } else {
      ad.style.position = '';
      ad.style.top = '';
      ad.style.left = '';
      ad.style.width = '';
    }
  }
  window.addEventListener('scroll', update);
  window.addEventListener('resize', update);
  update();
})();

Troubleshooting notes: ensure the parent does not use overflow:hidden (breaks sticky), keep a fixed width to avoid jumps, use z-index if the ad should sit above content, disable sticky on narrow viewports via media queries, and verify ad-network policies (some networks restrict persistent overlays). Test in multiple browsers and with ad-blockers off to confirm real behavior.

Recommended Answers

All 5 Replies

Member Avatar for Member #120589

If you're using Chrome, you can use right click > inspect and have a look at the CSS applied to each element on the page.

Member Avatar for hrsht

Hey that not works I tried.

Member Avatar for Member #120589

So did I - and it did..

b8e7a372b88a866497b19a87f609490d

Member Avatar for JorgeM

When you right click and inspect the element, take a look at the line that diafol highlighted for you. Then, scroll the page up and down and you will see that the position changes from absolute to fixed. To do this, you'll need some additional javascript/jQuery to change the position style depending on where you are on the page/scrolling.

Member Avatar for ellysdirectory

about floating ads on right sidebar maybe on css you need ad Float: right; but also you need to testing your website page to put it.

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.