3

Estoy haciendo un configurador, donde el cliente solicito que una tabla que se va armando dependiendo de lo que va escogiendo, lo acompañe mientras le da scroll, este es parte de mi HTML, donde se va armando imagen + tabla

HTML

<div id="sticky-anchor"></div>
      <div id="sticky" style="position: sticky;">
        <div id="no" style="display:none;">
          <img id="laimg" src="" style="position: absolute;width: 310px;height:230px;" />
        </div>
        <div id="results" style="position: absolute; width: 400px;">
        </div>
      </div>

Mi detalle es, estoy usando este codigo para permitir el scroll:

Javascript:

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_top = $('#sticky-anchor').offset().top;
    if (window_top > div_top) {
        $('#sticky').addClass('stick');
        $('#sticky-anchor').height($('#sticky').outerHeight());
    } else {
        $('#sticky').removeClass('stick');
        $('#sticky-anchor').height(0);
    }
}

$(function() {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});

var dir = 1;
var MIN_TOP = 200;
var MAX_TOP = 350;

function autoscroll() {
    var window_top = $(window).scrollTop() + dir;
    if (window_top >= MAX_TOP) {
        window_top = MAX_TOP;
        dir = -1;
    } else if (window_top <= MIN_TOP) {
        window_top = MIN_TOP;
        dir = 1;
    }
    $(window).scrollTop(window_top);
    window.setTimeout(autoscroll, 100);
}

Este funciona correctamente, sin embargo, se posiciona encima del footer de la pagina, hay forma de bloquear que no pase del footer?

Ya intente poniendo otro div anchor, tambien busque acerca del window.height, pero no veo forma de limitar el scroll.

1
  • Y si usas css y aplicas un overflow-y a tu elemento <div> donde armas tu tabla?
    – Yikarus
    Commented el 21 abr. 2017 a las 21:39

2 respuestas 2

1

La causa del problema es el uso del estilo position:absolute. Trata de reemplazar ambos position:absolute por position:relative o eliminarlos:

<div id="sticky-anchor"></div>
<div id="sticky" style="position: sticky;">
   <div id="no" style="display:none;">
      <img id="laimg" src="" style="position: relative;width: 310px;height:230px;" />
   </div>
   <div id="results" style="position: relative; width: 400px;"></div>
</div>
1
  • No, esto no funcionó.
    – Neobugu
    Commented el 21 abr. 2017 a las 23:54
1

Tenía el mismo problema, checa esto: http://jsfiddle.net/86Zp7/2/

(Ver en pantalla completa el siguiente código)

$(window).scroll(function() {
    relative_scroll(".article", ".side");
});

function relative_scroll(parent, item) {
		if ($(item).length) {
			var parent_height = $(parent).height() + parseInt($(parent).css("padding-bottom"));
			var parent_offset = $(parent).offset().top;
			var window_height = $(window).height();
			var element_height = $(item).height();
			var doc_scroll = $(document).scrollTop();

			var progress = (doc_scroll - parent_offset) / (parent_height - window_height);

			if (progress < 0) { progress = 0; }
			if (progress > 1) { progress = 1; }

			var scroll = (progress * ((parent_height + parseInt($(parent).css("margin-top"))) - element_height));
			if (scroll < 0) { scroll = 0; }

			if (element_height < parent_height) {
				if (parseInt(scroll + element_height) < parent_height) {
					$(item).css("margin-top", scroll +"px");
				} else {
					$(item).css("margin-top", (parseInt(parent_height) + parseInt($(parent).css("margin-top"))) - (element_height) +"px");
				}
			}
		}
}
.main {
    height:1500px;
    width:800px;
}

.article {
    display:inline-block;
    width:500px;
    height:1500px;
    background-color:black;
}

.side {
    display:inline-block;
    width:300px;
    height:300px;
    vertical-align:top;
    background-color:red;
}

.footer, .header {
    height:200px;
    width:800px;
    background-color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
</div>
<div class="main">
    <div class="article">
    </div><div class="side">
    </div>
</div>
<div class="footer">
</div>

¡Ojalá te sirva!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.