$(window).width() と $(document).width() 違い
$(window).width() と $(document).width() や
$(window).height() と $(document).height() がどういう時に違う値を返すかわからなかったので検索したら Stack Overflow に簡潔でわかりやすい説明がされてたので紹介します。
When you have a scrollbar on the webpage.
(スクロールバーが表示されてる時)
わかりやすいですね。一応念のために書いておくと window が「ブラウザの表示領域」で、document が「ページ全体」です。
参考
jquery – When can $(document).width() and $(window).width() show different values? – Stack Overflow