当我添加类更改器后,scroll
按钮消失了
//loading page
window.addEventListener('load', function () {
const loader = document.querySelector('.wavy');
loader.className += ' hidden'; // class "loader hidden"
});
//up button
//Get the button:
mybutton = document.getElementById('up');
// When the user scrolls down 300px from the top of the document, show the button
window.onscroll = function () {
scrollFunction();
};
function scrollFunction() {
if (
document.body.scrollTop > 300 ||
document.documentElement.scrollTop > 300
) {
mybutton.style.display = 'block';
} else {
mybutton.style.display = 'none';
}
}
// When the user clicks on the button, scroll to the top of the document
const btnScrollToTop = document.querySelector('#up');
btnScrollToTop.addEventListener('click', function () {
//scroll window.scrollTo(0, 0); // non animated
$('html,body').animate({ scrollTop: 0 }, 'slow'); //animated to smooth scroll
});
//transparent navbar
head = document.getElementById('head');
window.scroll = function () {
scrollFunction();
};
function scrollFunction() {
if (
document.body.scrollTop > 500 ||
document.documentElement.scrollTop > 500
) {
$('#head').removeClass('head').addClass('trans-head');
} else {
$('#head').removeClass('trans-head').addClass('head');
}
}