DOM修改后如何找到scrollTop

Question

我正在开发移动应用程序，我们使用 AJAX 加载基于 Framework7 的页面，但由于我正在动态加载页面和内容，我的函数应该会更改 header' s 颜色不再有效。

这是我的功能：

function scroller(){ 
    var target=$(window).scrollTop();
    console.log(target);

    if(target>=150){
        $('.navbar').css({'background-color':'rgba(191, 141, 87, 1)', 'box-shadow':'0px 0px 5px black', 'transition': 'all 1s ease'});
    }
    else{
        $('.navbar').css({'background-color':'rgba(191, 141, 87, 0)','box-shadow':'none'});
    }   
}

控制台显示 var 目标为 0，我猜这是因为我修改了 DOM 并添加了页面实例化时不存在的内容。

我怎样才能让我的功能发挥作用？谢谢

编辑：

我在 body 中调用我的函数：

<body onscroll="scroller();">

Answer 1

看下面的例子，希望你喜欢这样...

Fiddle

function scroller(){ 
    var target=$(window).scrollTop();
    console.log(target);

    if(target>=150){
        $('.navbar').css({'background-color':'rgba(191, 141, 87, 1)', 'box-shadow':'0px 0px 5px black', 'transition': 'all 1s ease'});
    }
    else{
        $('.navbar').css({'background-color':'gold','box-shadow':'none'});
    }   
}   
 $(document).scroll(function(){
  scroller();
 })

.navbar{
  position:fixed;top:0;background-color: gold;width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
  <p>
    Header...
  </p>
</div>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
   <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

DOM修改后如何找到scrollTop

How to find scrollTop after DOM modification

javascript

jquery

html-framework-7