elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: (TUTORIAL) Aprende a emular Sentinel Dongle By Yapis


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Pregunta]: ¿Cuál es la formula correcta?
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Pregunta]: ¿Cuál es la formula correcta?  (Leído 2,319 veces)
Leguim


Desconectado Desconectado

Mensajes: 719



Ver Perfil
[Pregunta]: ¿Cuál es la formula correcta?
« en: 31 Agosto 2020, 09:42 am »

Estoy tratando de hacer un sidebar "pegajoso/sticky" pero la siguiente formula como que no me funciona del todo bien, en un principio si funciona bien pero se estropea si al documento se le agregan nuevos elementos (append) es decir, la altura de la página aumenta entonces se me estropea...

Código
  1. if($(this).scrollTop() > $('.sidebar_nav_left').offset().top - $(window).scrollTop())
  2. {
  3.          // le agrego al sidebar un estilo de position "fixed" para hacer el efecto de sticky
  4.         // y modifico el marginTop del sidebar a "-45px"
  5. }
  6. else
  7. {
  8.         // le agrego al sidebar un estilo de position "relative" para hacer el efecto de que se despegó ya que llegó nuevamente arriba de todo.
  9. }
  10.  

Pero como dije esta formula tiene ese problema, y no soy muy bueno para estas cosas...


« Última modificación: 31 Agosto 2020, 10:08 am por MiguelCanellas » En línea

Drakaris

Desconectado Desconectado

Mensajes: 286


Todo lo que puedas imaginar, lo puedes crear.


Ver Perfil
Re: [Pregunta]: ¿Cuál es la formula correcta?
« Respuesta #1 en: 1 Septiembre 2020, 11:05 am »

Buenas, creo que estas buscando algo como esto? Este trozo de código es de un menu horitzontal que cuando haces scroll hacia abajo, se adhiere arriba de la página.

(jQuery)
Código
  1. var altura = $('.menu').offset().top;
  2.    $(window).on('scroll', function(){
  3.        if ( $(window).scrollTop() > altura ){
  4.            $('.menu').addClass('menu-fixed');
  5.        } else {
  6.            $('.menu').removeClass('menu-fixed');
  7.        }
  8.    });
  9.  

La idea es la siguiente:
Código
  1. var altura = $(".menu").offset().top
la variable altura, obtiene la altura de posición donde esta el menú
Código
  1. $(window).on('scroll', function(){
Después de obtener la altura del objeto (del menu), vamos a hacer eventListener del scroll, en jquery es con la funcion on().
Código
  1.        if ( $(window).scrollTop() > altura ){
  2.            $('.menu').addClass('menu-fixed');
  3.        } else {
  4.            $('.menu').removeClass('menu-fixed');
  5.        }
  6.  
dentro del listener, vamos a hacer una condicional, que, cuando la altura del scroll ($(window).scrollTop()) sea mayor a la altura del menú. Este me añada la clase menu-fixed a la etiqueta con la clase .menu. Por lo contrario me va a eliminar la clase menu-fixed.

Si el scrollTop() es mayor que la altura del menu eso significa que estoy haciendo scroll hacia abajo, así que aplica la clase.

Aquí estoy usando Jquery http://g-t-e.260mb.net/plugins/jquery-lastest.js

Código
  1. .menu-fixed {
  2.    position: fixed;
  3.    z-index: 1000;
  4.    top: 0;
  5.    left: 0;
  6.    width: 100%;
  7.    max-width: 1000%;
  8.    box-shadow: 0px 4px 3px rgba(0,0,0,.5);
  9. }
  10.  

Espero haberte ayudado. Suerte ;D


En línea

Lo increible, no es lo que ves, sino como es
Leguim


Desconectado Desconectado

Mensajes: 719



Ver Perfil
Re: [Pregunta]: ¿Cuál es la formula correcta?
« Respuesta #2 en: 3 Septiembre 2020, 01:52 am »

Hola!

Si, el código funcionaba bien lo que pasó fue que en otra parte de la aplicación estaba eliminando el evento del scroll entonces era eso lo que me daba problemas, ahora todo funciona como esperaba.

Gracias!!
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
No se cual es mi puerto de enlaze correcta.
Seguridad
zyack 4 2,485 Último mensaje 25 Abril 2014, 00:20 am
por zyack
Implementación GIT Cual es la forma correcta? « 1 2 »
Programación General
Pablo Videla 10 7,331 Último mensaje 5 Marzo 2015, 23:04 pm
por EFEX
Consulta Problema Con Bits - Cual es la respuesta correcta?
Programación C/C++
palacio29 5 3,986 Último mensaje 21 Octubre 2016, 15:25 pm
por Eternal Idol
Pregunta con estructuras y Pilas en C - Cual es la opcion correcta.
Programación C/C++
palacio29 1 1,873 Último mensaje 22 Octubre 2016, 13:37 pm
por ivancea96
[Pregunta]: desplegables dinámicos (Formula)
Desarrollo Web
Leguim 0 2,236 Último mensaje 20 Septiembre 2020, 01:06 am
por Leguim
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines