Jquery 在页面加载时，计算出哪个部分在视图中

我有一个长页面的网站，有很多章节。我有一些代码，允许用户通过按向上/向下箭头一次向上/向下移动第1节，这很好，但如果页面加载不在网站顶部，则当前代码会被忽略-例如，如果加载的是第5节，则向下移动的代码会失败，因为它会向上滚动到第2节，基本上，代码是在加载时将i变量设置为0。。。我需要的是一些代码，根据滚动位置查看当前查看的部分，然后将变量I设置为正确的值。。。这可能吗

HTML示例是：

<section class="panelSection" id="id_intro">
<p>Contents...</p>
</section>

<section class="panelSection" id="id_text">
<p>Contents...</p>
</section>

<section class="panelSection" id="id_pic">
<p>Contents...</p>
</section>

内容

内容

内容

jQuery逻辑如下：

/*  scroll next / prev */
$(document).ready(function() {

var sections = $('.panelSection');
//console.log(sections);
var i = null;


function next(){

    if(i == 0){
        $('.prevBtn').css("opacity","1"); 
    }
    if(i < sections.length -1){
        i++;
        if(i == sections.length -1){
             $('.nextBtn').css("opacity","0.5");   
        }
         $('html, body').animate({
            scrollTop: sections[i].offsetTop
        }, 800);
    }else{
       // alert('end reached');
    }
}
function prev(){
    if(i == sections.length -1){
        $('.nextBtn').css("opacity","1"); 
    }
    if(i > 0){
        i--;
        if(i == 0){
            $('.prevBtn').css("opacity","0.5"); 
        }
         $('html, body').animate({
            scrollTop: sections[i].offsetTop
        }, 800);
    }    
}
$('html').keydown(function(e){
    if(e.which == '38'){
        prev();
        //console.log(i)  
    }
   if(e.which == '40'){
        next();
        //console.log(i)   
    }
});
$('.nextBtn').click(function(e){
   e.preventDefault();
   next();
});

$('.prevBtn').click(function(e){
   e.preventDefault();
   prev();
});  

});
/* end of scroll next / prev */

/*滚动下一步/上一步*/
$（文档）.ready（函数（）{
变量节=$（'.panelSection'）；
//控制台日志（部分）；
var i=null；
函数next（）{
如果（i==0）{
$（'.prevBtn'）.css（“不透明度”，“1”）；
}
如果（i0）{
我--；
如果（i==0）{
$（'.prevBtn'）.css（“不透明度”，“0.5”）；
}
$（'html，body'）。设置动画({
scrollTop:节[i]。偏移设置
}, 800);
}    
}
$（'html'）.keydown（函数（e）{
如果（e.which=='38'）{
prev（）；
//控制台日志（i）
}
如果（e.which=='40'）{
next（）；
//控制台日志（i）
}
});
$（'.nextBtn'）。单击（函数（e）{
e、 预防默认值（）；
next（）；
});
$（'.prevBtn'）。单击（函数（e）{
e、 预防默认值（）；
prev（）；
});  
});
/*下一个/上一个滚动结束*/

我使用此命令在视口中获取当前的.panelSection，然后将.panelSection的id转换为数字值，并使I变量变为。。。工作正常，但并不理想，因为逻辑是基于硬编码的id名称

所以代码是：

$(document).ready(function () {
  var inview = $('.panelSection:in-viewport').attr('id')
     //console.log(inview);

     if (inview == "id_intro") { i = 0; }
     if (inview == "id_text") { i = 1; }
     if (inview == "id_pic") { i = 2; }


     //console.log(i);

});

---

不确定您是否已经尝试过，但如果您有全屏部分，您可能想看一看，这些部分提供回调以完成您的请求，甚至是

正文中的类。