Excluding a sub-class from an animation in Jquery/CSS

I have a site where by I am using a small jQuery function and css to translate a section on page scroll (fades in and moves up).

All of the sections that I do not want to animate have a sub-class of 'sp-portfolio' i.e. sp-page-builder .section .sp-portfolio but the function works on .sp-page-builder section See below (please note, this runs in Joomla hence the slightly different syntax at the start:

jQuery(document).on("scroll", function () {
    var pageTop = jQuery(document).scrollTop()
    var pageBottom = pageTop + jQuery(window).height()
    var tags = jQuery(".sp-page-builder section")
        for (var i = 0; i < tags.length; i++) {
    var tag = tags[i]
    if (jQuery(".sp-portfolio")[0]){
        //Do Nothing
    } else {
    if (jQuery(tag).position().top < pageBottom) {
            jQuery(tag).addClass("visible").delay( 800 )
    } else {
            jQuery(tag).removeClass("visible")
            }
        }
    }
})

The css is:

/** Animation test **/
.sp-page-builder section:nth-child(n+3):not(:nth-last-child(-n+2)) {
  opacity: 0;
  transition: opacity 1s;
  transform: translate(0, 100px); 
  transition: all 0.6s;
}
.sp-page-builder section:nth-child(n+3):not(:nth-last-child(-n+2)).visible { 
  opacity: 1;
  transform: translate(0, 0);
}

Is there a way to check if the sub-class .sp-portfolio exists and if so to skip the function on that section.

The above code just seems to skip the function on the entire page rather than moving on to the next section.

A sample page can be seen here: SP Portfolio - The sections that should not move are 'Our Work' and 'Latest Insights'.

from Excluding a sub-class from an animation in Jquery/CSS