Hi, I am trying to make scroll detection: when scroll page-content
to 55px the elements that have the id acquires a class and it works great in index page.
However, I do the same in my page, popup and it doesn’t work at all.
I discovered that selecting id will not work but selecting the elements and it works.
Here is my jQuery code, it works for page-content in index, but not works for page-content in page and popup
$('.page-content').on('scroll', function (){
$id=$(this).attr("id");
var target=$$(this);
//navbar
if (target.scrollTop() > 33) {
$("#title-" + $id).fadeIn(150, function() {
$("#title-" + $id).show();
$("#title-" + $id).removeClass("xi-temp");
});
} else {
$("#title-" + $id).fadeOut(150, function() {
$("#title-" + $id).hide();
});
}
//hairline
if (target.scrollTop() > 49) {
$("#navbar-" + $id).addClass("xi-hairline");
} else {
$("#navbar-" + $id).removeClass("xi-hairline");
}
});
HTML
<div class="page">
<div class="navbar">
<div class="navbar-inner" id="navbar-home">
<!-- nav -->
<div class="left">
<a class="xi-title-left" href="#" onClick="window.location.reload()">
<i class="fas fa-sync fa-lg"></i>
</a>
</div>
<div class="title sliding xi-temp" id="title-home" style="margin-left:5px;">ftOS</div>
<div class="right">
<a class="link icon-only searchbar-enable" data-searchbar=".searchbar-tab-home">
<i class="fas fa-search fa-lg"></i>
</a>
</div>
<!-- Searchbar-->
<form class="searchbar searchbar-expandable searchbar-tab-home searchbar-init">
<div class="searchbar-inner">
<div class="searchbar-input-wrap">
<input type="search" placeholder="Search"/>
<i class="searchbar-icon"></i>
<span class="input-clear-button"></span>
</div>
<span class="searchbar-disable-button">Cancel</span>
</div>
</form>
</div>
</div>
<!-- Scrollable page content-->
<div class="page-content" id="home">....</div>
</div>
So any solution for this?