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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

任何想法？

回答：

隐藏这个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>

回答：

你可以简单地做一些计算来获得你所需要的百分比：

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>

回答：

在这里，我已经转化百分率它。更新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>

以上是 在滚动某个百分比之后隐藏div 的全部内容， 来源链接： utcz.com/qa/259992.html

回到顶部