スクロールの一定割合の後でdivを非表示にする

Question

私は2つのCTAボタンを持つdivを持っています。私はこのdivをページの90％に達するか、#footer divに到達した後で非表示にします。私がこれをやっているのは、それがフッタに干渉しないようにするためです。

私はいくつかのコードを見つけましたが、パーセンテージに基づいていない800pxスクロール後にdivを非表示にします。

$(document).scroll(function() { 
 
    var y = $(this).scrollTop(); 
 
    if (y > 800) { 
 
    $('.bottomMenu').fadeIn(); 
 
    } else { 
 
    $('.bottomMenu').fadeOut(); 
 
    } 
 
});

body { 
 
    height: 1600px; 
 
} 
 

 
.bottomMenu { 
 
    display: none; 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 60px; 
 
    border-top: 1px solid #000; 
 
    background: red; 
 
    z-index: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="bottomMenu"></div>

任意のアイデア？

Answer 1

隠すこれは、ページの90％に達した後DIV：

あなたはMath.round($(document).height() * 90/100)

var height = Math.round($(document).height() * 90/100); 
 

 
$(document).scroll(function() { 
 
    var y = $(this).scrollTop(); 
 
    if (y > height) { 
 
    $('.bottomMenu').fadeIn(); 
 
    } else { 
 
    $('.bottomMenu').fadeOut(); 
 
    } 
 
});

body { 
 
    height: 1600px; 
 
} 
 

 
.bottomMenu { 
 
    display: none; 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 60px; 
 
    border-top: 1px solid #000; 
 
    background: red; 
 
    z-index: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="bottomMenu"></div>

で90％を取得する必要があります

や私#footer divのに達する

あなたは窓からのオフセット要素を取得するためoffset().topを使用する必要があります。

var height = Math.round($('#footer').offset().top); 
 

 
$(document).scroll(function() { 
 
    var y = $(this).scrollTop(); 
 
    if (y > height) { 
 
    $('.bottomMenu').fadeIn(); 
 
    } else { 
 
    $('.bottomMenu').fadeOut(); 
 
    } 
 
});

body { 
 
    height: 1600px; 
 
} 
 

 
.bottomMenu { 
 
    display: none; 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 60px; 
 
    border-top: 1px solid #000; 
 
    background: red; 
 
    z-index: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="bottomMenu"></div> 
 
<div style="height:1000px;"></div> 
 
<div id="footer"></div>

Answer 2

あなたは、単にあなたが必要とする割合を取得するには、いくつかの計算を行うことができます。

var limit = parseInt(($(document).height() * 70)/100); 
 
/* here I took 70% of the height of the page*/ 
 

 
console.log(limit); 
 

 
$(document).scroll(function() { 
 
    var y = $(this).scrollTop(); 
 
    if (y < limit) { 
 
    $('.bottomMenu').fadeIn(); 
 
    } else { 
 
    $('.bottomMenu').fadeOut(); 
 
    } 
 
});

body { 
 
    height: 1600px; 
 
} 
 

 
.bottomMenu { 
 
    display: none; 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 60px; 
 
    border-top: 1px solid #000; 
 
    background: red; 
 
    z-index: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="bottomMenu"></div>

Answer 3

ここ

私はパーセンテージでそれを変換しています。 PER値を更新して設定を更新してください。

//PER is Percentage value 
 
var PER = 90; 
 
var yInPixel, totalHeight; 
 

 
//If page if with dynamic height change totalHeight and yInPixel after Resize Event 
 
$(document).ready(function() { 
 
    totalHeight = $(this).height(); 
 
    yInPixel = totalHeight * (PER/100) - window.innerHeight; 
 
}); 
 

 
$(document).scroll(function() { 
 
    var y = $(this).scrollTop(); 
 

 
    if (y > yInPixel) { 
 
    $('.bottomMenu').fadeIn(); 
 
    } else { 
 
    $('.bottomMenu').fadeOut(); 
 
    } 
 
});

body { 
 
    height: 1600px; 
 
} 
 

 
.bottomMenu { 
 
    display: none; 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 60px; 
 
    border-top: 1px solid #000; 
 
    background: red; 
 
    z-index: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="bottomMenu"></div>