我想在用户到达某个元素时添加一个CSS类。
var pag_offset = $('.pagination_extra').offset();
$('.pagination-wrapper').addClass('pagination-wrapper-fixed');
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() < $(window).height() + pag_offset.top - 100) {
$('.pagination-wrapper').addClass('pagination-wrapper-fixed');
} else {
$('.pagination-wrapper').removeClass('pagination-wrapper-fixed');
}
});
.pagination_extra {
display: inline-block;
width: 100%;
}
.pagination-wrapper a {
text-decoration: none;
cursor: pointer;
}
.pagination-wrapper {
text-align: center;
margin:auto;
width: 50%;
}
.pagination-wrapper-fixed {
position: fixed;
bottom: 0;
z-index: 7;
width: 100%;
margin-bottom: 8px;
}
.pagination {
display: inline-block;
height: 70px;
margin-top: 10px;
padding: 0 25px;
border-radius: 35px;
background-color: #eee;
}
@media only screen and (max-width: 1199px) {
.pagination {
height: 50px;
padding: 0 10px;
border-radius: 25px;
}
}
.page-numbers {
display: block;
padding: 0 25px;
float: left;
transition: 300ms ease;
color: #595959;
font-size: 20px;
line-height: 70px;
font-family: nazanin;
}
.page-numbers:hover, .page-numbers.current {
background-color: #86c023;
color: #fff;
}
.page-numbers.prev:hover, .page-numbers.next:hover {
background-color: transparent;
color: #86c023;
}
@media only screen and (max-width: 1199px) {
.page-numbers {
padding: 0 15px;
font-size: 16px;
line-height: 50px;
}
}
@media only screen and (min-width: 120px) and (max-width: 1024px) {
.page-numbers {
padding: 0 14px;
display: none;
}
.page-numbers:nth-of-type(2) {
position: relative;
padding-right: 50px;
}
.page-numbers:nth-of-type(2)::after {
content: "...";
position: absolute;
font-size: 25px;
top: 0;
left: 45px;
}
.page-numbers:nth-child(-n + 3), .page-numbers:nth-last-child(-n + 3) {
display: block;
}
.page-numbers:nth-last-child(-n + 4) {
padding-right: 14px;
}
.page-numbers:nth-last-child(-n + 4)::after {
content: none;
}
}
<h1>foo<br></h1><h1>foo<br></h1><h1>foo<br></h1><h1>foo<br></h1><h1>foo<br></h1><h1>foo<br></h1><h1>foo<br></h1><h1>foo<br></h1><h1>foo<br></h1><h1>foo<br></h1><h1>foo<br></h1><h1>foo<br></h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pagination_extra"></div>
<div class="pagination-wrapper">
<div class="pagination">
<a class="prev page-numbers">←</a>
<a class="page-numbers">1</a>
<a class="page-numbers">2</a>
<a class="page-numbers">3</a>
<a class="page-numbers">4</a>
<a class="next page-numbers">→</a>
</div>
</div>
<h1>foo<br></h1><h1>foo<br></h1><h1>foo<br></h1><h1>foo<br></h1><h1>foo<br></h1><h1>foo<br></h1>
When user reaches the .pagination_extra
element it should add a CSS class.
问题是,当尚未到达将删除该类的元素时,它是不准确的。
So I tried to add or subtract the offset value like pag_offset.top - 100
but it will change on different screen size.
How can I make it accurate that when user exactly reaches the .pagination_extra
element it changes the class?