2016-08-02 3 views
2

가 여기 내 JS 코드입니다 : 나는 그것을 원하지만 웨이 포인트가 전혀처럼JQuery와 웨이 포인트 .scroll() 충돌

$(window).scroll(function (event) { 
    var scrollTop = $(window).scrollTop(); 
    var height = $(window).height(); 
    var opacity = ((height - scrollTop)/height); 
    var scale = ((height - (scrollTop/10))/height); 
    console.log(opacity); 
    if(opacity>=0.05){ 
     $.each(links, function(i, link) { 
      $(link).css({ 
       'opacity': opacity, 
      }); 
     })} else { 
      $(link).css({ 
       'opacity': 0.05 
      }); 
     } 
    if(scale>=0.9){ 
     $('#index').css({ 
      'transform': 'scale('+scale+')' 
     }); 
    } else { 
     $('#index').css({ 
      'transform': 'scale(0.9)' 
     }); 
    } 
}); 
$(document).ready(function() { 
    $('#aboutContent').waypoint(function(direction) { 
     alert('hit!'); 
    }); 
}); 

.scroll() 함수는 정확히 작동합니다. 그러나 .scroll() 함수를 제거하면 웨이 포인트가 제대로 작동합니다. 문제를 일으킬 수있는 부분을 누구나 찾아 낼 수 있습니까? .scroll()과 경유지 사이에 모르는 충돌을 찾을 수 없습니다. 다음은 JSFiddle입니다. https://jsfiddle.net/zocdvefx/ .scroll() 함수를 제거하면 웨이 포인트가 작동합니다.

감사합니다. 제이미는 바이올린에

+0

코드를보고이 문제를 해결하는 것은 어렵습니다. 관련 코드를 jsfiddle 또는 다른 환경으로 옮겨서 문제를 재현하거나 볼 수 있습니다. – bwegs

+0

그럴 수도 있습니다. https://jsfiddle.net/zocdvefx/ $ (window) .scroll() 함수를 제거하면 웨이 포인트가 작동합니다. –

답변

0

문제는이 if-else 블록에 있습니다

if (opacity >= 0.05) { 
    $.each(links, function(i, link) { 
    $(link).css({ 
     'opacity': opacity, 
    });  
    }) 
} else { 
    $(link).css({ // <-- link is no longer in scope and is undefined 
    'opacity': 0.05 
    }); 
} 

내가 문제를 해결할 수 위의 강조 표시 줄에 linkslink 변경.

나중에 참조 할 수 있도록 문제가 발생하면 언제든지 브라우저의 개발자 콘솔 (대개 F12)을 확인하십시오. jsfiddle에서 열면 즉시 문제가 무엇인지 알기 시작했습니다 : ReferenceError: link is not defined.

+1

정말 고마워요! 수업은 배웠습니다 (디자이너가 여기에서 개발하려고합니다!) –