javascript - 窗口高度不适用于浏览器调整大小

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