Show Anchor only after scroll

I'm trying to make a scroll banner appear only after the page has scrolled a bit.

The issue is that this banner was added in an unusual way since the site was built in a site editor (zyro), so I'm struggling to get some code to work.

The code that was used to place this scroll banner is this one:

<style>

html {
        scroll-behavior: smooth;
        transtion-duration: 1000ms;
      }

.bannerSide {
    position: fixed;
    height: 40px;
    width: 180px;
    display: flex;
    flex-direction: row;
    z-index: 9999;
    background-color: black;
    border-radius: 20px;
    bottom: 50vh;
    right: -1.5vw;
    color: #00F498;
    font-family: "Rubik";
    font-weight: bold;
    text-transform: uppercase;
    justify-content: space-evenly;
    align-items: center;
    letter-spacing: 2px;
    transform: rotate(270deg);
    cursor: pointer;
  }

</style>


<script>
  setTimeout(() => {
    const newLink = document.createElement('a')
    const text = document.createElement('p')
    const arrow = document.createElement('span')
    newLink.appendChild(arrow)
    newLink.appendChild(text)
    // Change this line to add text
    arrow.innerHTML = "←"
    text.innerText = "Formulário"
    newLink.onclick = function () {
      window.scroll(0,findPos(document.getElementById("download")));
    }
    newLink.classList.add('bannerSide')
    const bodyTag = document.querySelector('body')
    bodyTag.appendChild(newLink)
  }, 500)

function findPos(obj) {
    var curtop = 0;
    if (obj.offsetParent) {
        do {
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
    return [curtop];
    }
}

window.addEventListener('scroll', e => {
  bannerSide.style.display = window.scrollY > 1000 ? 'flex' : 'none';
});
</script>

The code was created by the website builder support team, and I'm not very knowledgeable in JavaScript...

I looked for some codes in CodePen to perform this function of making the banner appear only after the page is scrolled, but it didn't work.

the link to the website is this: https://bldgprod.com.br/

Taking the opportunity to ask, this same banner is stopping the scrolling before reaching the session specified in the code in the mobile version, if anyone has any idea why this is happening, it would help me a lot.

Show Anchor only after scroll

0 Answers