jquery scrolltop脚本无法正常工作

时间:2013-04-13 18:54:54

标签: jquery css scrolltop

我的最终目标是让我的标题在窗口到达某个点时从相对位置切换到固定位置。在试图到达那里我想出了这个功能,它不会给我任何错误但也似乎没有做任何事情。有人可以帮我理解为什么吗?它是页面上加载的最后一个脚本,在它之前调用了jquery ..

<script type="text/javascript">
$(function() {
var $window = $(window);
function top() {
var $top = $window.scrollTop();
if( $top > 100 ) {
    $("header").css("position","absolute"); 
}
else {
    $("header").css("position","fixed");    
}
};
});
</script>

如果我想将它限制为移动应用程序怎么办?不应该像这样的工作...

<script type="text/javascript">
 $(function() {
     var $window = $(window).width();
     function windowWidth() {
         if ( $window < 480 ) {
      function top() {
          var $top = $window.scrollTop();
          if( $top > 100 ) {
             $("header").css("position","absolute"); 
           }
           else {
              $("header").css("position","fixed");    
          }
     };
     $(window).scroll(top);
         }
     };
   });
</script>

3 个答案:

答案 0 :(得分:1)

使用$(window).scroll(top)或使用setTimeInterval(top, 100);

假设标题为id

<script type="text/javascript">
 $(function() {
     var $window = $(window);
      function top() {
          var $top = $window.scrollTop();
          if( $top > 100 ) {
             $("#header").css("position","absolute"); 
           }
           else {
              $("#header").css("position","fixed");    
          }
     };
     $(window).scroll(top);
   });
</script>

答案 1 :(得分:0)

它没有做任何事情的原因是你没有打电话。你没有什么可以触发代码。我假设你找到了this脚本。如果你注意到它被包裹在$(窗口).scroll中,而不仅仅是函数,则触发它。

您需要修改代码:

$(window).scroll(function() {
    if($(window).scrollTop() > 100) {
        $("header").css("position","absolute"); 
    } else {
        $("header").css("position","fixed");    
    }
});

答案 2 :(得分:0)

我认为你没有在给定代码中的任何地方调用.scroll()函数,因此它永远不会被触发:

<script type="text/javascript">
  $(function() {
     var $window = $(window);
     function top() {
        var $top = $window.scrollTop();
        if( $top > 100 ) {
            $("header").css("position","absolute"); 
        }else {
            $("header").css("position","fixed");    
        }
     };
     $window.scroll(top);
  });
</script>