Revise the following in your second if statement:
- Avoid nesting it.
- Switch the comparison operator
>= to <=.
- Utilize
removeClass.
Modify:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
$(".class").addClass("bgposi");
// $(".top").addClass("fixd");
// $(".logo").addClass("maxwidth");
if (scroll >= 50) {
$(".class").addClass("bgposi");
// $(".top").addClass("fixd");
// $(".logo").addClass("maxwidth");
}
}
});
To:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
$(".class").addClass("bgposi");
// $(".top").addClass("fixd");
// $(".logo").addClass("maxwidth");
} else if (scroll <= 50) {
$(".class").removeClass("bgposi");
// $(".top").removeClass("fixd");
// $(".logo").removeClass("maxwidth");
}
});
You can optimize by caching commonly used selectors (performing the lookup once), such as:
$(window).scroll(function() {
var scroll = $(this).scrollTop();
var $class = $(".class"),
$top = $(".top"),
$logo = $(".logo");
if (scroll >= 50) {
$class.addClass("bgposi");
$top.addClass("fixd");
$logo.addClass("maxwidth");
} else if (scroll <= 50) {
$class.removeClass("bgposi");
$top.removeClass("fixd");
$logo.removeClass("maxwidth");
}
});
$(window).scroll(function() {
var scroll = $(this).scrollTop();
var $class = $(".class");
if (scroll >= 50) {
$class.addClass("bgposi");
} else if (scroll <= 50) {
$class.removeClass("bgposi");
}
});
body {
height: 200vh;
background-color: peachpuff;
}
.class {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 20%;
background-color: dodgerblue;
}
.class.bgposi {
background-color: purple;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class"></div>