 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
|
|
|
Linear Mode
