/ / Przyklejony nagłówek jQuery addClass nie działa - javascript, jquery, html, css

Przyklejony nagłówek jQuery addClass nie działa - javascript, jquery, html, css

Próbuję utworzyć lepki nagłówek, ale kiedy przewijam w dół jQuery addClass funkcja nie działa. Próbowałem również $(this) ale to też nie działa. Próbuję dodać kolejną klasę podczas przewijania, ale to nie działa. Chcę zmienić tło color nagłówka to jest mój HTML kod

$(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>

I to jest ten css klasa, w której zmieniłem tło colors

Odpowiedzi:

3 dla odpowiedzi № 1

Problem:- W Twoim przypadku $(this) odnosi się do window nie .myNavigation.

Rozwiązanie :-

$(this).addClass("active");
$(this).removeClass("active");

Muszą być:-

objectSelect.addClass("active");
objectSelect.removeClass("active");

Working Snippet: - https://jsfiddle.net/7ko4k75t/


1 dla odpowiedzi nr 2

The instrukcja warunkowa zachowuje się zgodnie z oczekiwaniami, ale należy rozważyć użycie .addClass() metoda ze zmienną objectSelect - który ma Już zdefiniowane element, który będzie wymagał zmiany klasy (.myNavigation).

$(this), w to przypadku, jest niewłaściwie stosowany pod względem zakresu, this odnosi się do window określone w zakres wyboru z .scroll() metoda.

Demonstracja fragmentu kodu:

Uwaga: dodano rejestrowanie konsoli, aby zademonstrować, kiedy wystąpią zmiany stanu

$(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 dla odpowiedzi nr 3

Proste rozwiązanie na czystym JS:

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();
});