JSFiddle - React, Tailwind, and code Playground

by Arpita Jain

JavaScript

$.fn.parallax = function (parent) {
    
    var container = $(this),
        viewTop = parent.scrollTop(),
        viewHeight = parent.height(),
        viewHeader = $(".header-container").outerHeight() || 0,
        viewBottom = viewTop + viewHeight,
        header = viewTop + viewHeader;
    container.has(".speedy").each(function () {
        var $t = $(this),
            _top = $t.offset().top,
            _height = $t.height(),
            _bottom = _top + _height,
            largest_el = Math.max.apply(null, $t.find(".speedy").map(function () {
                return $(this).height() + (parseInt($(this).data("top") || 0));
            }).get());
        $t.find(".speedy").each(function () {
            var el = $(this),
                scrollspeed = parseFloat(el.data('scroll-speed') || 0),
                top = parseFloat(el.data('top') || 0);
            console.log("viewTop:" + viewTop + ", viewHeight:" + viewHeight + ", viewBottom:" + viewBottom);
            console.log("_top:" + _top + ", _height:" + _height + ", _bottom:" + _bottom);
            console.log("viewTop:" + viewTop + ", viewHeader" + viewHeader);
            if ((_top < (header + 10) && _top > (header - 10)) || (((_bottom - 20) - largest_el) < header + 10 && ((_bottom - 20) - largest_el) > header - 10)) {
                el.css({
                    "transition": "none"
                });
                setTimeout(function () {
                    el.css({
                        "transition": ""
                    });
                }, 1000);
            }
            if (header < _top) {
                console.log("absolute");
                var val = Math.max(viewHeight - (viewBottom - _top) * 10 / scrollspeed, top),
                    position = "absolute",
                    translate = "0";
                el.css({
                    'top': val + 'px',
                        'position': position,
                        'transform': 'translateY(' + translate + 'px)'
    ...