Javascript 是否可以在滚动50%或以上后隐藏一个div并显示另一个div？

我有一个部分在2分区内，分区的名字是1分区和2分区。默认情况下，第二个div将被隐藏，滚动50%或更多后，第一个div将被隐藏，第二个div将被显示。我该怎么做

我用过：

var heightDivid = $(window).height() / 2;
$(window).on('scroll', function(e){
    $('.sections-class').each(function(){
        if(this.getBoundingClientRect().top <= heightDivid ){
             $(this).removeClass('heightDivids') ;
        }
        else{
             $(this).addClass('heightDivids') ;
        }
    })
})

var heightDivid=$（窗口）.height（）/2；
$（窗口）.on（'scroll'，函数（e）{
$（'.sections类'）。每个（函数（）{
如果（this.getBoundingClientRect（）.top，也许您可以沿着这些路线修改一些内容，以完成您试图执行的操作

利用jQuery的
scrollTop
来确定要在何处进行更改

设置要隐藏
one
div并显示
two
div的时间限制

$(window).scroll(function() {
    var height = $(window).scrollTop();
    if(height  >  10) {
        $('.two').show();
        $('.one').hide();
    }
});

例如：

如果要反转效果，只需添加第二个条件：

示例：
我终于做到了：）这对我来说很有用……谢谢大家的帮助：）

var shadowEdgePoint=$（窗口）.height（）/2；
$（窗口）.on（'scroll'，函数（e）{
$（'.section类'）。每个（函数（）{
if（this.getBoundingClientRect（）.top）创建一个场景，并将能够帮助您显示现有代码。此网站不打算让我们为您制作项目。有许多javascript方法可以做到这一点，但没有详细说明，我们基本上只是编写您的所有代码。
 var shadowEdgePoint = $(window).height() / 2;
    $(window).on('scroll', function(e){
        $('.section-class').each(function(){
            if(this.getBoundingClientRect().top <= shadowEdgePoint){
                         $('.two').show();
                        $('.one').hide();
            }
                else{
                        $('.two').hide();
                        $('.one').show();
                    }
        })
    });