스크롤 제이쿼리 관련 문제.. 도와주세요 ㅠㅠ

스크롤 제이쿼리 관련 문제.. 도와주세요 ㅠㅠ

QA

스크롤 제이쿼리 관련 문제.. 도와주세요 ㅠㅠ

본문

http://test.thedirectwedding.com/ 

 

반응형 홈페이지 PC버전중 메뉴부분 작업중에 문제가 생겨 여쭤봅니다 ㅠ

크롬이나 파이어폭스에선 문제가 없었는데 익스플로러에서만 상단메뉴중 가장 마지막 버튼을 누르니 체크가 계속안되네요 ㅠ

스크롤링 과정중에 상단에 닿는부분은 a태그를 이용해서 해당 a태그가 제일 위에 닿을때 메뉴에 선택효과가 나오도록

지정을 했는데 유독 마지막 버튼이 익스플로러에서만 클릭시엔 제대로 체크가 되지 않습니다 ㅠ

스크롤 내릴땐 체크가 잘먹는데 메뉴버튼 클릭시에만 문제가 생기네요.. ㅠ_ㅠ)

퍼블리싱 고수님분들의 답변을 기다립니다. 도와주세욧 ;ㅠ;)!!

이 질문에 댓글 쓰기 :

답변 2

$("#tab0"+i).offset().top 

->

Math.floor( $("#tab0"+i).offset().top ); 

해당 url 의 웹페이지를 확인해 본 결과

높이 좌표값에 의해 setClass(i) 함수가 적용되는 부분을 조금 수정해야 하는데,

메뉴의 갯수가 7개로 고정되는 것이라면 우선 수동으로 아래와 같이 수정해보세요.

 


//아래 for 문에 내용 추가
for (var i = 1 ; i <= $(".top_menu").find("a").length ; i++)
{
    var scr_top = $("#tab0"+i).offset().top   
    if (d_stop >= scr_top )
    {
        setClass(i);
    }
    //아래부분 추가함
    else if(d_stop > 4200)
    {
        setClass(7);
    }
}

 

마지막 메뉴 fnMove('7')의 높이 좌표값이 대략 4308 정도 나오네요.

그래서 else if(d_stop > 4200) 이런식으로 추가한 겁니다.

만약에 "웨딩홀 리스트" 위 부분의 내용이 많아지면 7번째 메뉴의 높이 좌표값도 바뀌기 때문에 이때에는 수동으로 4200 보다 큰 수로 변경해야 합니다.

 

이것을 자동으로 하고 싶다면

마지막 scr_top 의 값을 변수(last_scr_top)로 지정하고 d_stop 와 last_scr_top를 비교하는 방식(d_stop > last_scr_top)으로 처리하면 될 것같습니다. 

제가 제시해 드린 방법보다는 "슈와이"님이 제시한 내용으로 소스를 수정하세요.

마지막 메뉴의 좌표값이 소수점 아래까지 잡히는 것이 문제였나 봅니다.

그냥
var scr_top = $("#tab0"+i).offset().top  <-- 이부분을
var scr_top = Math.floor( $("#tab0"+i).offset().top );  <-- 이렇게 고치기만 하면 됩니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 138
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT