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 (){
	$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?