2012-11-18 162 views
3

我试图用响应式设计实现scrollTop()函数,但由于某些原因,此代码不起作用。jQuery ScrollTop()函数不工作

以下内容将检查页面是否完全加载,而不是检查页面是否完全滚动。确保页面滚动通过标题后,它会显示一个固定在屏幕顶部的图像,该图像会将页面发送到屏幕的顶部。我的问题是图像不会出现。任何帮助表示赞赏!

$(document).ready(function() { 
      if ($(document).width() > 650) { 
       $('#welcome').css('padding-top', $('#header').height() + 50 + 'px'); 
       $(document).scroll(function() { 
        if ($(document).scrollTop() >= $('#header').height()) { 
         $('#up-arrow').css('position', 'fixed').css('right', '0'); 
        } else { 
         $('#up-arrow').css('display', 'none'); 
        } 
       }); 
      } else { 
       $('#welcome').css('padding-top', '25px'); 
      } 
     }); 
     $(window).resize(function() { 
      if ($(document).width() > 650) { 
       $('#welcome').css('padding-top', $('#header').height() + 50 + 'px'); 
       $(document).scroll(function() { 
        if ($(document).scrollTop() >= $('#header').height()) { 
         $('#up-arrow').css('position', 'fixed').css('right', '0').css('display','block'); 
        } else { 
         $('#up-arrow').css('display', 'none'); 
        } 
       }); 
      } else { 
       $('#welcome').css('padding-top', '25px'); 
      } 
     }); 

回答

3

它采取了一些故障,但我相信我发现了问题:

如果文档不滚动过去的负载头,您为向上的箭头以display:none的CSS。

但是,当它滚动得足够远时,您只能设置position: fixed - 您实际上不会再打开它。

因此改变这一行:

$('#up-arrow').css('position', 'fixed').css('right', '0'); 

要:

$('#up-arrow').css({'position': 'fixed', 'display': 'block', 'right' : 0}); 

,它会工作。

+0

谢谢!就是这样。 – user1623677