Member Avatar for pjrey

http://www.oddee.com/item_82923.aspx

scroll all the way down, notice the popout on the right side bottom, once you scroll to the bottom.. is there a tut/site/code on howto do that??

thanks
pj

  • 2 Contributors
  • 2 Replies
  • 67 Views
  • 19 Hours Discussion Span
  • Latest Post Latest Post by pjrey

Dani AI

Generated

asked about that right-bottom slide-out and was on the right track mentioning a pixel/threshold check. A reliable pattern is to place a small invisible "trigger" element near the page end (or the footer) and toggle a CSS class on the popout when that trigger becomes visible. The modern, performant way to do that is the Intersection Observer API; fall back to a simple scroll + getBoundingClientRect check where needed.

Here is a compact example (CSS + JS). The JS observes a footer/trigger and adds/removes a class so CSS handles the animation.

/* CSS */
.popout {
  position: fixed;
  right: 12px;
  bottom: 12px;
  transform: translateY(110%); /* start off-screen */
  transition: transform 250ms ease;
}
.popout.visible {
  transform: translateY(0);
}
// JS
const popout = document.querySelector('.popout');
const trigger = document.querySelector('.site-footer'); // element near page end

if ('IntersectionObserver' in window) {
  const obs = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      popout.classList.toggle('visible', entry.isIntersecting);
      popout.setAttribute('aria-hidden', entry.isIntersecting ? 'false' : 'true');
    });
  }, { threshold: 0 });
  obs.observe(trigger);
} else {
  const onScroll = () => {
    const rect = trigger.getBoundingClientRect();
    const inView = rect.top < window.innerHeight && rect.bottom >= 0;
    popout.classList.toggle('visible', inView);
    popout.setAttribute('aria-hidden', inView ? 'false' : 'true');
  };
  window.addEventListener('scroll', onScroll, { passive: true });
  onScroll();
}

Notes and troubleshooting: tune rootMargin or threshold to control when the popout appears. Use media queries to hide the popout on small screens, and manage focus/aria attributes so it does not trap keyboard users. For reference, see the Intersection Observer API and Element.getBoundingClientRect().

Recommended Answers

All 2 Replies

Member Avatar for SaintThomas

may be there are some technique like when ever some HTML element go below some pixel div is show as a dynamic html script.

it's just a simple

Member Avatar for pjrey

hmmm???

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.