Question

我有一个视差滚动网站，通过部分ID工作。我在每个部分都有动画但只希望它们在视图中的部分时激活。我目前有以下，似乎没有工作。我对jquery / javascript很新，所以任何帮助都会受到赞赏！

function paintLine(){
  $('#3-Backup-3').lazylinepainter({
    "svgData": svgData,
    'ease': 'easeInOutQuad',
    'strokeCap': 'square'
  }).lazylinepainter('paint'); 
}

var element_position = $('#backup-section-3').offset().top;

$(window).scroll(function() {
    var y_scroll_pos = window.pageYOffset;
    var scroll_pos_test = element_position;


    if(_scroll_pos > scroll_pos_test) {
        paintLine();
    }
});

 <!-- Backup 3 -->    
              <div data-anchor="backup-section-3" class="section backup-section-3">
                <div class="float-left">
                  <div id="backup-nav">
                    <p onclick="openSideNavGreen()" class="nav-section-title">Backup</p>
                  </div>
                  <div>
                    <p class="backup-text-title">Methods</p>
                    <p class="backup-text">No surprises here then: tape as a primary backup method remains at an all-time low of 3%. This is the first year it hasn’t fallen – possibly indicative of how stubborn some legacy systems (often populated with static compliance data) can be. I wouldn’t be surprised to see similar figures next year.<br><br>We did see a drop in the prevalence of combined disk/tape solutions, with a new option, External Hard Drive/USB, seeming the preferred choice instead.</p>
                  </div>
                </div>
                <div class="float-right"> 
                <div id="3-Backup-3"></div> 
                </div>
              </div>

Answer 1

$('#backup-section-3').offset().top;指的是 ID backup-section-3的元素，您在HTML标记中似乎没有。尝试提供您引用backup-section-3 ID的元素，看看是否能解决您的问题。

Answer 2

id需要以alpha字符开头。在你的javascript和html中将任何alpha字符放在3前面，它会起作用。

在jquery滚动函数中无法识别section id

2 个答案: