I am facing an issue with the code below. It is supposed to display "Dedicated People" when scrolling down, however, it is not working in my browser. Could it be that I forgot to include a reference in the head section? The code works fine in CodePen, but in other browsers, it is not displaying anything. What could be the reason behind this, and how can I fix it specifically for the Chrome browser?
$(function() {
var text = $(".text");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 10) {
text.removeClass("hidden");
} else {
text.addClass("hidden");
}
});
});@import url('https://fonts.googleapis.com/css?family=Muli:300,400,700');
* {
margin: 0;
padding: 0;
}
body {
background-color: #000;
height: 200vh;
font-family: 'Muli', sans-serif;
}
.text {
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
list-style: none;
border-bottom: 0;
}
.text.hidden {
border-bottom: 1px solid #fff;
}
.text li {
display: inline-block;
float: left;
font-weight: 700;
font-size: 2em;
color: #fff;
opacity: 1;
transition: all 0.5s ease-in-out;
max-width: 2em;
}
.text.hidden li.spaced {
padding-left: 0;
}
.text li.spaced {
padding-left: 0.5em;
}
.text.hidden li.ghost {
opacity: 0;
max-width: 0;
}<ul class="text hidden">
<li>D</li>
<li class="ghost">e</li>
<li class="ghost">d</li>
<li class="ghost">i</li>
<li class="ghost">c</li>
<li class="ghost">a</li>
<li class="ghost">t</li>
<li class="ghost">e</li>
<li class="ghost">d</li>
<li class="spaced">P</li>
<li class="ghost">e</li>
<li class="ghost">o</li>
<li class="ghost">p</li>
<li class="ghost">l</li>
<li class="ghost">e</li>
</ul>