ArticleZip > Have A Div Cling To Top Of Screen If Scrolled Down Past It Duplicate

Have A Div Cling To Top Of Screen If Scrolled Down Past It Duplicate

Are you looking to create a div element that sticks to the top of the screen even when scrolled down past it? Well, you're in luck because we've got you covered with this step-by-step guide on how to achieve just that!

To make a div cling to the top of the screen after scrolling past it, you can use a simple combination of HTML, CSS, and a dash of JavaScript. This technique is commonly used in web development to create sticky elements that enhance user experience and keep important information within reach.

First, let's set up the HTML structure for our sticky div:

Html

<div class="sticky-div">
  This is a sticky div!
</div>

Next, we'll add some CSS to style our div and make it sticky:

Css

.sticky-div {
  position: -webkit-sticky; /* For Safari */
  position: sticky;
  top: 0;
  background-color: #f1f1f1;
  padding: 10px;
}

In the CSS code above, we've set the `position` property to `sticky`, which tells the browser to keep the div positioned relative to the viewport. The `top: 0;` property ensures that the div sticks to the top of the screen when scrolled.

Now, comes the magic touch of JavaScript to duplicate the div when it's scrolled past:

Javascript

window.onscroll = function() {myFunction()};

var header = document.querySelector('.sticky-div');
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset &gt; sticky) {
    header.classList.add('sticky');
  } else {
    header.classList.remove('sticky');
  }
}

In the JavaScript code snippet above, we're calculating the offset position of the div and adding a CSS class (`sticky`) to duplicate it when the user scrolls past the original div.

Finally, let's enhance the visual effect by styling the duplicated div in our CSS:

Css

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

With this CSS class, we set the position to `fixed`, width to `100%` to ensure full width coverage, add a box-shadow for depth effect, and set a high z-index value for proper layering.

And there you have it! By combining HTML, CSS, and JavaScript, you can easily create a div element that sticks to the top of the screen when scrolled down past it and duplicates for a seamless user experience. Give it a try on your next web project and amaze your users with this neat feature!

Related posts:

×