As someone who is not very skilled in coding, I often find myself stumbling my way through using javascript libraries and jquery. Recently, I came across classie.js and have been utilizing it to add classes to divs and elements in my html when they appear at a certain scroll distance on the page. This has led me to include numerous scripts in my header section to handle these class additions and removals.
<script>
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 100,
feature = document.querySelector("#welcomediv");
if (distanceY > shrinkOn) {
classie.remove(feature,"welcomewish");
} else {
classie.add(feature,"welcomewish");
}
});
}
window.onload = init();
</script>
... (more script blocks here)
(...and there are even more! If I had my way, I would probably want to add even more because of the flexibility it offers with manipulating elements by adding and removing classes. However, this approach feels clunky, messy, and incredibly hard to maintain.)
The issues I am facing with this setup are:
1) My header section is filled with cumbersome scripts. Is there a way to streamline these scripts while retaining their functionality?
2) Whenever I introduce new elements or remove existing ones from the page, I need to manually adjust the numeric values (shrinkOn) associated with each instance. This quickly becomes a nightmare. It would be ideal if I could indicate something like "when this element appears on the page" or "100px after this element appears on the page" instead of specifying a fixed pixel value for scrolling. Can classie accommodate this requirement, or should I explore alternative solutions?
Thank you in advance, and I hope this query is appropriate for discussion.