2014-12-23 2 views
1

기본적으로, 저는 "자석"처럼 행동하는 특정 웹 사이트를 원합니다. 이 중 하나 근처에있는 경우이 jQuery 플러그인과 비슷한 창이 맨 위로 스크롤해야합니다. http://benoit.pointet.info/stuff/jquery-scrollsnap-plugin/jQuery는 스크롤 위치를 조정하지 않습니다.

문제는 페이지가 " 자석".

$(document).ready(function() { 

var magnets = []; 
var range = 200; 
var active = true; 

$('.container').each(function(i,obj) { 
    magnets.push($(this).offset().top); 
}); 

console.log(magnets); 

var attract = function(where,time){ 
    $('html, body').animate({ 
     scrollTop: where 
    }, time); 
    active = false; 
}; 

//checks the range of a magnet 
var magnetic = function(what){ 
    var top = $(window).scrollTop(); 
    var min = top - range; 
    var max = top + range; 

    if((min <= what) && (max >= what)){ 
     return true; 
    } else{ 
     return false; 
    } 
} 

//returns, wether you are in range of a magnet from your magnets array or not 
var inRange = function(){ 
    var magnet = -1; 

    for(var i=0; i<magnets.length; i++){ 
     if(magnetic(magnets[i]) == true){ 
      magnet = i; 
     } 
    } 
    return magnet; 
} 

$(window).scroll(function() { 

    $('.counter').html(""); 

    $('.counter').append("<p>"+inRange()+"</p>"); 

    if(active == true && inRange != -1){ 
     attract(magnets[inRange()]); 
    } 
    else if(active == false && inRange() == -1){ 
     active = true; 
    } 
    else if(active == true && inRange() == -1){ 
     console.log("fuck"); 
    } 
}); 
}); 

대안 codepen 링크 : 코드에 무슨 문제가 있나요 http://codepen.io/NiclasvanEyk/pen/jEMrZr

답변

0

: 여기

는 jQuery를하다

if(active == true && inRange != -1){ 
    attract(magnets[inRange()]); 
} 

될해야

if(active == true && inRange() != -1){ 
    attract(magnets[inRange()]); 
} 
관련 문제