Question

我有一个包含很多部分的长页网站。我有一些代码允许用户通过按向上/向下箭头一次向上/向下移动部分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 */

Answer 1

我使用这个http://www.appelsiini.net/projects/viewport来获取当前的.panelSection in-viewport，然后将.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);

});

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

1 个答案: