Fala turma, segue abaixo todos os códigos mostrados na nossa Introdução a CSS, HTML e JS.

⚠️Atenção⚠️

Antes te tudo, caso não tenha assistido a nossa monitoria, aqui está o link da call para você entender todos os processos de implementação de cada código abaixo.

https://drive.google.com/file/d/14YcyQ3HqhPZlin66HSNy-V7SUESzEphb/view?usp=drive_web

Mais…

Abaixo mais algumas calls para ajudar vocês a entenderem sobre o V4 PAGES e um link do canal para tirar dúvidas sobre o V4 pages no GCHAT.

POP Onboarding V4 Pages:

https://elastic-spinach-23f.notion.site/POP-Onboarding-V4-Pages-19f2a98ce89d80318556c72a29fe76ff

V4 Pages: O Start [Monitoria Designers Single Entity 01/03]:

https://drive.google.com/file/d/1oL1rFQBPn36kTV979l2znYGG8jPK2y4M/view?usp=drive_web

Link do canal para tirar dúvidas sobre V4 Pages:

https://chat.google.com/room/AAAAwLBOPFg?cls=4

🔻Barra de progresso personalizada

<script>
/* PrognRoll | <https://mburakerman.github.io/prognroll/> | @mburakerman | License: MIT */
(function ($) {
    $.fn.prognroll = function (options) {

        var settings = $.extend({
            height: 3, // progress bar height
            color: "#ffe1ad", // progress bar background color
            custom: false // if you make it true, you can add your custom div and see it's scroll progress on the page
        }, options);

        var progressBar = $("<span>", {
            class: "prognroll-bar",
        });

        return this.each(function (i, el) {
            if ($(this).data("prognroll")) {
                return false;
            }
            $(this).data("prognroll", true);

            $("body").prepend(progressBar).end().find(".prognroll-bar").not(":first").remove();

            $(".prognroll-bar").css({
                position: "fixed",
                top: 0,
                left: 0,
                width: 0,
                height: settings.height,
                backgroundColor: settings.color,
                zIndex: 2147483647
            });

            var globals = {
                "windowScrollTop": $(window).scrollTop(),
                "windowOuterHeight": $(window).outerHeight(),
                "bodyHeight": $(document).height()
            }

            function bindWindowScroll() {
                $(window).scroll(function (e) {
                    e.preventDefault();
                    globals.windowScrollTop = $(window).scrollTop();
                    globals.windowOuterHeight = $(window).outerHeight();
                    globals.bodyHeight = $(document).height();

                    var total = (globals.windowScrollTop / (globals.bodyHeight - globals.windowOuterHeight)) * 100;
                    $(".prognroll-bar").css("width", total + "%");
                });
            }

            if (settings.custom === false) {
                bindWindowScroll();
            } else {
                // if el has no max-height set
                if ($(this).css("max-height") == "none") {
                    bindWindowScroll();
                } else {
                    $(this).scroll(function (e) {
                        e.preventDefault();
                        var customScrollTop = $(this).scrollTop();
                        var customOuterHeight = $(this).outerHeight();
                        var customScrollHeight = $(this).prop("scrollHeight");

                        var total = (customScrollTop / (customScrollHeight - customOuterHeight)) * 100;
                        $(".prognroll-bar").css("width", total + "%");
                    });
                }
            }

            // get scroll position on on page load 
            var total = (globals.windowScrollTop / (globals.bodyHeight - globals.windowOuterHeight)) * 100;
            $(".prognroll-bar").css("width", total + "%");
        });
    };
})(jQuery);
</script>          
<script>
    $(function() {
      $("body").prognroll({
        height: 2, //Progress bar height in pixels
        color: "#ffe1ad", //Progress bar background color
      });
    });
</script>

🔻Barra de rolagem personalizada

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* width */
::-webkit-scrollbar {
  width: 4px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #000000;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #ffe1ad;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #ffe1ad;
}
</style>
</head>   

<body>