jquery - fijo - Cambiar clases con animación según la posición de desplazamiento
menu fijo al hacer scroll bootstrap (4)
Vea esto: http://jsfiddle.net/Dxtyu/1/
var menu = $(''.m1'');
$(window).scroll(function () {
var y = $(this).scrollTop();
var z = $(''#portfolio'').offset().top;
if (y >= z) {
menu.removeClass(''menu'').addClass(''light-menu'');
}
else{
menu.removeClass(''light-menu'').addClass(''menu'');
}
});
Mi página contiene cuatro secciones, cada una configurada al 100% de altura con diferentes colores de fondo. En la parte superior, tengo un menú fijo. Quiero que el menú cambie su color de fondo según la sección que el usuario use en ese momento, por lo que se combina mejor con el fondo.
Hasta ahora he logrado hacer que el color BG del menú cambie cuando se ingresa la cartera, pero no es mucho y estoy atascado. Tiene que cambiar su color una vez más, cuando el usuario se desplaza de vuelta a su casa, de aquí para allá y así sucesivamente. Además, quiero que esté animado, pero no sé cómo usar animate () con addClass (). Lo he intentado durante los últimos dos días sin ningún éxito.
La otra cosa que me tortura es que los elementos del menú también deberían responder a la posición de desplazamiento. Por ejemplo, si el usuario se desplaza de Inicio a Portafolio, la clase activa se debe aplicar a Portafolio y se debe eliminar de Inicio. Espero que tengas la idea.
Hasta ahora mi código se ve así:
<div class="menu">
<div id="menu-center">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a class="inactive" href="#portfolio">Portfolio</a></li>
<li><a class="inactive" href="#about">About</a></li>
<li><a class="inactive" href="#contact">Contact</a></li>
</ul>
</div>
</div>
<div id="home"></div>
<div id="portfolio"></div>
<div id="about"></div>
<div id="contact"></div>
No tengo idea de por qué, pero no puedo publicar el CSS aquí sin romper toda la publicación, así que solo ve a jsFiddle para verlo todo junto.
$(document).ready(function () {
var menu = $(''.menu'');
var portfolio_position = $(''#portfolio'').offset().top;
var about_position = $(''#about'').offset().top;
var contact_position = $(''#contact'').offset().top;
$(window).scroll(function () {
var scroll = $(this).scrollTop();
if (scroll >= portfolio_position) {
menu.removeClass(''menu'').addClass(''menu-light'');
}
});
});
Aquí: JSnippet DEMO
Utilizando:
var menu = $(''.m1'');
$(window).scroll(function () {
var y = $(this).scrollTop();
var z = $(''#portfolio'').offset().top;
if (y >= z) {
menu.removeClass(''menu'').addClass(''light-menu'');
}
else{
menu.removeClass(''light-menu'').addClass(''menu'');
}
});
Y:
background-color:rgba(4, 180, 49, 0.6);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
Prueba este violín . He asignado una clase diferente a cada div para que pueda ver las transiciones más fácilmente.
Incluidas las animaciones (de esta pregunta SO), usando esto:
div {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
Se agregó una nueva clase para apuntar a los divs para el vuelo estacionario.
<div class="hoverDiv" id="home">home<p></p></div>
Luego, para el cambio de evento y reemplazo de clase, este jquery:
$(''.hoverDiv'').hover(function(){
//adjust the menu background color
removeMenuClasses();
menu.addClass($(this).attr(''id'') + ''-menu'');
});
function removeMenuClasses(){
var classNames = menu.attr(''class'').split('' '');
for(var i = 0;i < classNames.length; i++){
if(classNames[i].indexOf(''menu'') >= 0){
menu.removeClass(classNames[i]);
}
}
}
Desplácese con esto:
if (y >= contact_position) {
menu.addClass($("#contact").attr(''id'') + ''-menu'');
}
else if (y >= about_position) {
menu.addClass($("#about").attr(''id'') + ''-menu'');
}
HTH!
un enfoque ligeramente diferente es verificar si el elemento está realmente a la vista. Basé esta solución en una gran pequeña función provista aquí: https://.com/a/488073/1807551 por Scott Dowding. Puede establecer fácilmente colores / clases para cada sección de div usando esta técnica.
Violín de la solución: http://jsfiddle.net/acturbo/YzM3Q/
CSS:
.menu { background-color: #ffffff; }
.menu-light { background-color: #cc0000; }
/* this lets you easily set colors by div section/class:
.porfolio-section-bg { background-color: #cc0000; }
*/
jquery:
function isInView(elem){
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
$(document).ready(function () {
var menu = $(''.menu'');
$(window).scroll( function () {
if (isInView( $(''#portfolio-section'') ) ){
menu.addClass(''menu-light'');
}else{
menu.removeClass(''menu-light'');
}
});
});