Intento crear un encabezado fijo pero cuando estoy desplazándome hacia abajo jQuery addClass la función no funciona, también he intentado con $(this) pero tampoco está funcionando. Estoy tratando de agregar otra clase mientras me desplazo, pero no está funcionando. Quiero cambiar el fondo color del encabezado este es mi HTML código
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var objectSelect = $(".myNavigation");
var objectPosition = objectSelect.offset().top;
if (scroll > objectPosition) {
$(this).addClass("active");
} else {
$(this).removeClass("active");
}
});
});.active {
background: #147cc4 !important;
color: #fff !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-md fixed-top navbar-dark mb-4 myNavigation">
<div class="container">
<div class="col-md-2">
<ul class="navbar-nav mr-auto">
<form class="form-inline navbar-form" role="search">
<div class="search">
<span class="fa fa-search"></span>
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
</ul>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="logoFont">Hifzil</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link">Donate</a>
</li>
<li class="nav-item">
<a class="nav-link">Login</a>
</li>
<li class="nav-item">
<a class="nav-link">Sign In</a>
</li>
</ul>
</div>
</div>
</nav>Y este es el css clase en la que he cambiado el fondo colors
Respuestas
3 para la respuesta № 1Problema:- En tu caso $(this) se refiere a window no .myNavigation.
Solución:
$(this).addClass("active");
$(this).removeClass("active");
Necesitan ser:-
objectSelect.addClass("active");
objectSelect.removeClass("active");
Fragmento de trabajo: - https://jsfiddle.net/7ko4k75t/
1 para la respuesta № 2
los sentencia condicional se comporta como se esperaba, aunque considere usar .addClass() método con la variable objectSelect - que tiene Ya definido el elemento que requerirá el cambio de clase (.myNavigation)
$(this), en esta caso, se está utilizando incorrectamente, con respecto al alcance, this se refiere a window definido en el rango de selector del .scroll() método.
Demostración de fragmento de código:
Nota: se agregó el registro de la consola para demostrar cuándo ocurren los cambios de estado
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var objectSelect = $(".myNavigation");
var objectPosition = objectSelect.offset().top;
if (scroll > objectPosition) {
$(objectSelect).addClass("active");
console.log("this:",$(objectSelect).attr("class"));
} else {
$(objectSelect).removeClass("active");
console.log("this:",$(objectSelect).attr("class"));
}
});
});.active {
background: #147cc4 !important;
color: #fff !important;
}
html {
min-height: 1000px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-md fixed-top navbar-dark mb-4 myNavigation">
<div class="container">
<div class="col-md-2">
<ul class="navbar-nav mr-auto">
<form class="form-inline navbar-form" role="search">
<div class="search">
<span class="fa fa-search"></span>
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
</ul>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="logoFont">Hifzil</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link">Donate</a>
</li>
<li class="nav-item">
<a class="nav-link">Login</a>
</li>
<li class="nav-item">
<a class="nav-link">Sign In</a>
</li>
</ul>
</div>
</div>
</nav>1 para la respuesta № 3
Solución simple en JS puro:
var
head = document.getElementsByClassName("myNavigation")[0];
function stickyHeader() {
if (window.pageYOffset > 150) {
head.classList.add("active");
}
else if (window.pageYOffset <= 150) {
head.classList.remove("active");
}
}
window.addEventListener("scroll", function () {
stickyHeader();
});