Member Avatar for kny_jay88

Hi, i need some code for slide out panel that will pop out when i scroll down like this one,
Click Here
It's very cool. please help.

  • 3 Contributors
  • 3 Replies
  • 211 Views
  • 15 Hours Discussion Span
  • Latest Post Latest Post by ome2012

Dani AI

Generated

A concise, practical pattern to recreate the “slide-out on scroll-down” behavior mentioned by . Instead of copying site code, inspect behavior as suggested and use a short prototype to learn the mechanics. This example uses GPU-friendly CSS transforms, requestAnimationFrame for efficient scroll handling, and a small threshold so the panel only appears after meaningful scrolling — a starting point to adapt rather than a drop-in library. ’s point about showing effort is fair; the snippet below is intentionally minimal so it can be extended.

<!-- minimal markup -->
<div id="slidePanel" class="panel" aria-hidden="true">
  <button class="close" aria-label="Close">x</button>
  <!-- panel content -->
</div>
.panel {
  position: fixed;
  right: 0;
  top: 20%;
  width: 280px;
  transform: translateX(110%);
  transition: transform .28s ease;
  will-change: transform;
  z-index: 9999;
}
.panel.visible { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .panel { transition: none; } }
(function(){
  var panel = document.getElementById('slidePanel');
  var lastY = window.pageYOffset || 0;
  var shown = false;
  var ticking = false;
  var threshold = 150;

  function update(y){
    if (y > lastY && y > threshold && !shown) {
      panel.classList.add('visible');
      panel.setAttribute('aria-hidden','false');
      shown = true;
    } else if (y < lastY && shown) {
      panel.classList.remove('visible');
      panel.setAttribute('aria-hidden','true');
      shown = false;
    }
    lastY = y;
  }

  window.addEventListener('scroll', function(){
    var y = window.pageYOffset || 0;
    if (!ticking) {
      window.requestAnimationFrame(function(){ update(y); ticking = false; });
      ticking = true;
    }
  }, {passive:true});
})();

Key notes and troubleshooting: use CSS transform for smooth, GPU-accelerated motion; requestAnimationFrame plus a simple guard avoids expensive work on every scroll event; adjust threshold to control when the panel appears. If the panel behaves oddly, check for transformed ancestors (a CSS transform on a parent makes a fixed element behave relative to that parent — moving the panel to be a child of body fixes this). Add a visible close control, manage focus and aria-hidden, respect prefers-reduced-motion, and consider hiding or scaling the panel on small screens or storing a session flag so it does not repeatedly annoy users.

Recommended Answers

All 3 Replies

Member Avatar for kny_jay88

also like this one

menu will pop out when you scroll the page down. Someone help?

Member Avatar for JorgeM

You may need to be a bit patient. Getting real time live help is not always available. I myself am not next to a PC to further investigate. In the mean time, you could simply right click somewhere on the target page and click view source. You may be able to figure out the jQuery code that's being used on that page.

Member Avatar for ome2012

you have to show us your effort of making a program don't just ask about the whole code try to make one of yours and maybe we can help when you encounter some problems...

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.