2012-11-18 163 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