ウィンドウのスクロール位置が大きい場合にdivを表示しないように設定する

Question

ウィンドウのスクロール位置がdivの下部位置よりも大きい場合、divを非表示にする必要があります。私は自分でやろうとしましたが、何か間違っています。また、私はこの質問を提出するために、より良いテキストとテキストの比率が必要なので、別の質問があります。なぜ私は警告する（）; img_topはオブジェクトオブジェクトを表していますか？マッチした要素の位置を表す

$(document).ready(function(){ 
 
\t var img_height = $("#head").outerHeight(); 
 
\t var img_top = $("#head").offset(); 
 
    var img_bot = img_height + img_top; 
 

 
    $(window).scroll(function(){ 
 
    \t var wind_pos = $(window).scrollTop(); 
 
    \t $("p").html(wind_pos); 
 
    
 
    if(wind_pos > img_bot){ 
 
    \t $("#head").addClass("hide"); 
 
    } 
 
    }); 
 
});

*{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body{ 
 
    height: 4000px; 
 
} 
 

 
#head{ 
 
    height: 600px; 
 
    background-color: blue; 
 
} 
 

 
.hide{ 
 
    display: none; 
 
} 
 

 
p{ 
 
    background-color: yellow; 
 
    width: 100%; 
 
    height: 50px; 
 
}

<div id="head"> 
 

 
</div> 
 
<p> 
 
</p> 
 
<script 
 
    src="https://code.jquery.com/jquery-3.2.1.min.js" 
 
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
 
    crossorigin="anonymous"></script>

Answer 1

jQuery.offset()リターンオブジェクト、あなたはそれのtopプロパティを読み取ることが想定されています。

$(document).ready(function() { 
 
    var img_height = $("#head").outerHeight(); 
 
    var img_top = $("#head").offset().top; 
 
    var img_bot = img_height + img_top; 
 

 
    $(window).scroll(function() { 
 
    var wind_pos = $(window).scrollTop(); 
 
    $("p").html(wind_pos); 
 

 
    if (wind_pos > img_bot) { 
 
     $("#head").addClass("hide"); 
 
    } 
 
    }); 
 
});

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body { 
 
    height: 4000px; 
 
} 
 

 
#head { 
 
    height: 600px; 
 
    background-color: blue; 
 
} 
 

 
.hide { 
 
    display: none; 
 
} 
 

 
p { 
 
    background-color: yellow; 
 
    width: 100%; 
 
    height: 50px; 
 
}

<div id="head"> 
 

 
</div> 
 
<p> 
 
</p> 
 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

Answer 2

img_top 

$("#head").offset(); 

はあなたが

$("#head").offset().top 

を使用する必要が 、上部と左オフセットを持つオブジェクトを返すためのオブジェクトであります

あなたの計算