jQuery selector won't select id in framework7's popup and page

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 (){
	var target=$$(this);
	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();
		if (target.scrollTop() > 49) {
		$("#navbar-" + $id).addClass("xi-hairline");
		 } else {
		$("#navbar-" + $id).removeClass("xi-hairline");


<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>
            <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>
    <!-- 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>
          <span class="searchbar-disable-button">Cancel</span>
        <!-- Scrollable page content-->
        <div class="page-content" id="home">....</div>

So any solution for this?