Issue
I use this jquery to add class to certain elements when it's scrolled but i used 3 of them and they all basically same except the classes i use. Since i add them seperately to the page they effect the page speed even if it is minimum so how i can i make them into just one jquery and not three?
Short version: How to combine these 3 into 1?
jQuery(document).on('scroll', (e) => {
if (document.body.scrollTop > 70 ||
document.documentElement.scrollTop > 70) {
console.log('now');
jQuery('.ast-primary-header-bar').addClass('headercoloring');
} else {
console.log('no');
jQuery('.ast-primary-header-bar').removeClass('headercoloring');
}
})
second:
jQuery(document).on('scroll', (e) => {
if (document.body.scrollTop > 70 ||
document.documentElement.scrollTop > 70) {
console.log('now');
jQuery('.astra-logo-svg').addClass('filterr');
} else {
console.log('no');
jQuery('.astra-logo-svg').removeClass('filterr');
}
})
third:
jQuery(document).on('scroll', (e) => {
if (document.body.scrollTop > 70 ||
document.documentElement.scrollTop > 70) {
console.log('now');
jQuery('.ast-below-header-bar').addClass('headernarrowing');
} else {
console.log('no');
jQuery('.ast-below-header-bar').removeClass('headernarrowing');
}
})
Solution
Pretty much starting from outside making all the equal parts as the same codebase.
jQuery(document).on('scroll', (e) => {
if (document.body.scrollTop > 70 || document.documentElement.scrollTop > 70) {
console.log('now');
jQuery('.ast-primary-header-bar').addClass('headercoloring');
jQuery('.astra-logo-svg').removeClass('filterr');
jQuery('.ast-below-header-bar').removeClass('headernarrowing');
} else {
console.log('no');
jQuery('.astra-logo-svg').addClass('filterr');
jQuery('.ast-primary-header-bar').removeClass('headercoloring');
jQuery('.ast-below-header-bar').addClass('headernarrowing');
}
})
Answered By - IT goldman Answer Checked By - Dawn Plyler (PHPFixing Volunteer)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.