Retour

Slider

Bulles

Héro

Timer

Rémi Accueil

Lebigre Rémi logo

Rémi Univers

Lebigre Rémi logo

Rémi Compétences

Lebigre Rémi logo

Rémi Réalisations

Lebigre Rémi logo

Rémi Contact

Légende : Fonction, argument, variables, objet, fonction JQuery


            /**
            * scroll bar depending on wrap's scroll position
            */

            $(window).scroll(function scrollBar() {
            var iDiff;
            var iWrapHeight = $('#wrap').height();
            var iScrollBarPos = $(document).scrollTop();

            iDiff = (iScrollBarPos / iWrapHeight) * 100;
            if (iDiff > 100) {
            iDiff = 100;
            }
            $('#scrollpos').css("width", (iDiff) + '%');
            });

            function scrollToOnClick() {

            var currentMousePos = { x: 0 };
            var iWrapHeight = $('#wrap').height();
            var iScrollOffset = $('#scroll').offset();

            $(this).mousemove(function (event) {
            currentMousePos.x = event.pageX;
             });

            $('#scroll')).click(function () {
            var scrollTo = ((currentMousePos.x - iScrollOffset.left) / 1180) * (iWrapHeight);
            $(document).scrollTop(scrollTo);
            });


            };
         

iWrapHeight calcule la hauteur du Wrapper, qui est encadré directement par le body.
iScrollBarPos calcule la position de la barre de scroll au sein du document.
Il n'y a plus qu'à comparer les deux pour savoir où l'on se situe !
Pour faire avancer la barre bleue de "chargement", un second bloc est contenu dans le premier, les deux en forme de ligne fine.
En fonction de notre position calculée plus haut, la largeur du second bloc bleu s'agrandira (de 0 à 100%), d'autant que le scroll manuel progresse.
Enfin, il faut rajouter le cas où l'utilisateur clique sur la barre pour naviguer.
Il faut simplement faire l'inverse : calculer à quel % de la barre l'utilisateur clic, et convertir cette valeur en pixels top. Cliquer à 50% de la barre amènera l'utilisateur à la moitié de la page.