Enfold – Enable Classes via Scroll Status
In the Enfold theme, if you have shrinking header or transparent header enabled, it will add a set of additional classes to your rendered code for html-scrolled or html-not-scrolled depending on your current scroll status. This is done via Javascript and used to trigger the necessary modifications to shrink the header. Unfortunately this is not a default function and therefore those specific classes cannot be used for other purposes if the shrinking header or transparent header are not enabled in the theme settings.
The function below adds this capability globally regardless of whether you have enabled those settings. Just add the code below to your child themes functions.php file:
// scrolled or not
add_action('wp_footer', 'ava_custom_script');
function ava_custom_script(){
?>
<script>
(function($){
$(window).scroll(function() {
if($(window).scrollTop() > 0) {
$('html').addClass('html-scrolled');
$('html').removeClass('html-not-scrolled');
} else {
$('html').addClass('html-not-scrolled');
$('html').removeClass('html-scrolled');
}
});
})(jQuery);
</script>
<?php
}
Source: https://kriesi.at/support/topic/add-class-while-scrolling/

Leave a Reply
Want to join the discussion?Feel free to contribute!