The JavaScript code works properly: the show and hide CSS classes names are appearing. The problem is in the CSS. So, to fix it try the following:

.quick-anchor-top {
  font-size: 25px;
  padding: 15px 25px 15px 25px;
  border-radius: 50px;
  color: rgb(0, 0, 0);
  background-color: rgba(182, 20, 20, 0.800);
  transition: all 0.4s ease;
  margin: 20px;
  position: fixed;
  z-index: 1;
  display: none;
}

.quick-anchor-top.show {
  display: block;
}

.quick-anchor-top.hide {
  display: none; 
}

.quick-anchor-top:hover {
  transition-duration: 0.4s;
  color: white;
  background-color: rgba(0, 0, 0, 0.800);
}

When page just loaded
You don’t need to set

class="bottom-0 end-0 quick-anchor-top hide"

change a tag to

 <a href="#header-title-1" id="customID" > <i
        class="fa-solid fa-arrow-up"></i></a>

change your if else to

 if (y >= 300) {
        myID.className = "quick-anchor-top"
    } else {
        myID.className = ""
    }

That is not the correct way to add or remove classes. Also I would recommend using a debounce or throttle depending on how you need to handle events because a scroll event can run several hundred times in a second.

const myID = document.getElementById("customID");

// Reset timeout after each call
const debounce = function (func, duration = 250){
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => { func.apply(this, args); }, duration);
  };
}

// Call only once per duration
function throttle(func, duration = 250) {
  let shouldWait = false
  return function (...args) {
    if (!shouldWait) {
      func.apply(this, args)
      shouldWait = true
      setTimeout(function () {
        shouldWait = false
      }, duration)
    }
  }
}

// Handle scroll Event
const scrollHandler = function() {
  const { scrollY } = window;
  if ( scrollY >= 300) {
    myID.classList.add('show');
    myID.classList.remove('hide');
  } else {
    myID.classList.add('hide');
    myID.classList.remove('show');
  }
};

window.addEventListener("scroll", throttle(() => scrollHandler()) );

I am trying to make a link that’s anchored to a heading appear after scrolling down 300px on my website, but my code doesn’t seem to work. Does anyone know why?
NOTE-
I am using Bootstrap5 on my website.
I have altered my code based on the replies I got but I’m still facing the issue. This is how my code looks now-

Here is my code –

 <a href="#header-title-1" id="customID" class="bottom-0 end-0 quick-anchor-top hide"> <i
      class="fa-solid fa-arrow-up"></i></a>



.quick-anchor-top {
    font-size: 25px;
    padding: 15px 25px 15px 25px;
    border-radius: 50px;
    color: rgb(0, 0, 0);
    background-color: rgba(182, 20, 20, 0.800);
    transition: all 0.4s ease;
    margin: 20px;
    position: fixed;
    z-index: 1;
}

.quick-anchor-top:hover {
    transition-duration: 0.4s;
    color: white;
    background-color: rgba(0, 0, 0, 0.800);
}

.quick-anchor-top.show {
    display: block;
  }
  
  .quick-anchor-top.hide {
    display: none; 
  }



const myID = document.getElementById("customID");

// Reset timeout after each call
const debounce = function (func, duration = 250){
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => { func.apply(this, args); }, duration);
  };
}

// Call only once per duration
function throttle(func, duration = 250) {
  let shouldWait = false
  return function (...args) {
    if (!shouldWait) {
      func.apply(this, args)
      shouldWait = true
      setTimeout(function () {
        shouldWait = false
      }, duration)
    }
  }
}

// Handle scroll Event
const scrollHandler = function() {
  const { scrollY } = window;
  if ( scrollY >= 300) {
    myID.classList.add('show');
    myID.classList.remove('hide');
  } else {
    myID.classList.add('hide');
    myID.classList.remove('show');
  }
};

window.addEventListener("scroll", throttle(() => scrollHandler()) );