画面サイズによってイベントのタイミングが変わってしまうのを修正したい

Question

現在作っているウェブサイトのでフッター付近になった時にサイドバーを非表示にしたいと思っています。
現在成功してはいるのですが画面の幅が変わった時などに非表示にするタイミングが大きく変ってしまい、統一したいと考えています。現在のjsは下記のようになっています。「single」という要素名に対象のdivのID名を格納しています。お力添えいただける方いましたら、よろしくお願い致します。

$(window).on('scroll',function(){
    var doch = $(document).innerHeight();
    var winh = $(window).innerHeight();
    var bottom = doch - winh;
    if(bottom*0.67 <= $(window).scrollTop()){
        $(single).css('display',"none");
       }else{
            $(single).css('display',"block");
}
})

よろしくお願い致します。

Comments

[x_x]

強いてあげれば resize がないというところ以外特に問題があるように見えませんでしたが、どのような操作をした時が問題と考えていますか？

[TakehiroShinmyo]

横幅が変ってしまった時にイベントが起きるタイミングが早くなったり遅くなったりしてしまうのです、何か手立てはありませんでしょうか？

Answer 1

レスポンシブWebデザインの手法をつかってみるのはいかがでしょうか。
画面サイズを指定と条件を記載することで、統一にできるもしれません。
参考文献
https://sole-color-blog.com/blog/71/

Comments

[TakehiroShinmyo]

なるほどですね、ご回答していただきありがとうございます！
レスポンシブも入れて再定義したいと思います

Answer 2

HTMLが記載されていないため、確認はできなかったのですが
おそらく下記のように修正すれば問題なく動作します。

$(window).on('load resize scroll', function () {
  var doch = $(document).innerHeight();
  var winh = $(window).innerHeight();
  var bottom = doch - winh;
  if (bottom * 0.67 <= $(window).scrollTop()) {
    $(single).css('display', "none");
  } else {
    $(single).css('display', "block");
  }
})

Comments

[TakehiroShinmyo]

ありがとうございます。早速試してみたいと思います