Fenix Rojo |
"> |
| Amnel | |
|
jQuery ScrollBubble on Scroll - 21/7/2016, 7:27 pm
Tengo una función de lo que muestra burbuja flotante con números en desplazamiento. Su funcionando bien y que muestra el desplazamiento de la burbuja, pero sobre todo después de desplazar la burbuja mantiene al tanto alternar. Aquí está el ejemplo siguiente comprueba por favor y me ayudan cuando algo anda mal en el código. Y gracias de antemano. Ejemplo: [Tienes que estar registrado y conectado para ver este vínculo]Código CSS: - Código:
body { position: relative; height: 800px; overflow: auto; width: 100%; background-color: pink; }
#scrollbubble { display: none; position: fixed; top: 0; right: 10px; z-index: 98; padding: 8px; background-color: rgba(0, 0, 0, 0.2); color: #ffffff; border-radius: 3px; }
#scrollbubble:after { content: ""; position: absolute; top: 50%; right: -8px; height: 0; width: 0; margin-top: -4px; border: 4px solid transparent; border-left-color: rgba(0, 0, 0, 0.2); } JavaScript: - Código:
$.fn.scrollBubble = function() { var base = this, selector = $(base), win = $(window), $doc = $(document), container = $(base.selector), scrollTimer = null;
if (win.width() > 940) { var viewportHeight = win.height(), scrollbarHeight = viewportHeight / $doc.height() * viewportHeight, progress = win.scrollTop() / ($doc.height() - viewportHeight), distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - container.height() / 2;
container.css('top', distance).text(Math.round(progress * 100) + '%').fadeIn(100);
if (scrollTimer !== null) { clearTimeout(scrollTimer); } scrollTimer = setTimeout(function() { container.fadeOut(); }, 1000); } }; $(window).scroll(function() { $('#scrollbubble').scrollBubble(); }); Código HTML: - Código:
<div id="scrollbubble"></div>
| Permisos de este foro: | No puedes responder a temas en este foro.
Código [IMG] está Activado Código HTML está Activado
|
|
|