在滚动某个百分比之后隐藏div

Question

我有一个div，它有两个CTA按钮。我将在达到页面的90％或达到我的#footer div后隐藏该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

隐藏这个div：

您需要获得90％的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>

或达到我的#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值来更新配置。达到90％的页面后

//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>