窗口高度在瀏覽器調整大小時不起作用

Question

我有這段代碼，當頁面具有滾動條時，換句話說，當瀏覽器高度超過用戶桌面分辨率時，顯示“滾動到底部”鏈接。 無論如何，如果最初加載頁面時瀏覽器窗口的高度較大，但是如果我在頁面加載后重新調整窗口的大小，則它不會觸發，但效果很好。

任何幫助，將不勝感激。

$(function() {
    // Check to see if window has scrollbars
        if ($(document).height() > $(window).height()) {
            $('.scrollToBottom').animate({
                opacity : 'show',
                height : 'show'
            }, 'fast');
        } else {
            $('.scrollToBottom').animate({
                opacity : 'hide',
                height : 'hide'
            }, 'fast');
        }
    // Click event to scroll to bottom
    $('.scrollToBottom').click(function() {
        $('html, body').animate({
            scrollTop : $(document).height()-$(window).height()
        }, 1500, 'easeOutQuint');
        return false;
    });
});

Answer 1

這是因為沒有“觸發器”。

當文檔准備就緒時，請參見以下語句$(function() { .// code }) ，執行代碼。

您需要的是瀏覽器調整大小時的另一個觸發器：

$(window).resize(function (){
  if ($(document).height() > $(window).height()) {
    $('.scrollToBottom').animate({
        opacity : 'show',
        height : 'show'
    }, 'fast');
  } else {
      $('.scrollToBottom').animate({
          opacity : 'hide',
          height : 'hide'
      }, 'fast');
  }
})

並且由於您不想重復自己，您應該編寫一個函數並在這些“觸發器”中調用它。

function showBar() {
  if ($(document).height() > $(window).height()) {
    $('.scrollToBottom').animate({
        opacity : 'show',
        height : 'show'
    }, 'fast');
  } else {
      $('.scrollToBottom').animate({
          opacity : 'hide',
          height : 'hide'
      }, 'fast');
  }
}

$(window).resize(function (){
  showBar();
})

$(function() {
  showBar();
})

這些觸發器稱為事件。 供參考： https : //developer.mozilla.org/en-US/docs/Web/Events