Question

我正在开发移动应用程序，我们使用AJAX来加载基于Framework7的页面，但是因为我正在加载页面＆amp;动态内容，我的函数应该改变标题的颜色不再起作用。

这是我的功能：

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'});
    }   
}

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

如何让我的功能发挥作用？感谢

编辑：

我在身体中调用我的功能：

<body onscroll="scroller();">

Answer 1

请参阅下面的示例我希望你想这样......

Fiddle

＆＃13;

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();
 })

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何在DOM修改后找到scrollTop

1 个答案: