jQuery 코드가 Safari에서 작동하지만 Firefox는 작동하지 않습니다.

Question

jQuery와 CSS를 혼합하여 사용하면 모래 아래에있는 모래를 페이지 아래로 스크롤 할 때 흐리게 표시하려고합니다. 기본적으로 두 개의 '모래'이미지가 있고 jQuery를 사용하여 사용자가 스크롤 할 때 컨테이너의 높이를 변경합니다.

<!-- Load jQuery --> 
    <script src="jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script> 

    <!-- Handle Hourglass Scrolling --> 
    <script type="text/javascript" charset="utf-8"> 
    $(document).ready(function(){ 

    // Set value of topStart and bottomStart to equal to y-position of the equivilent divs 
    var topStart = parseInt($('#top-sand').css('top')); 
    var bottomStart = parseInt($('#bottom-sand').css('top')); 

    // Calculate the maximum height of the sand relative to the window size 
    var sandHeight = $(window).height()*0.22; 

    // setValues sets positions based on window size 
    function setValues() { 
    topStart = parseInt($('#top-sand').css('top')); 
    bottomStart = parseInt($('#bottom-sand').css('top')); 
    sandHeight = $(window).height()*0.22; 
    var hourglassWidth = $('#hourglass #outline img').css('width'); 
    var leftMargin = $(window).width()*0.5+ 320; 

    $('#top-sand').height(22+"%"); 
    $('#top-sand img').height(sandHeight) 
    $('#bottom-sand img').height(sandHeight) 
    $('#hourglass').css({left:leftMargin+"px"}) 
    $('#trace').text(hourglassWidth) 


    // contentMarginLeft = $('#hourglass #outline').width(); 
    // $('#content').text(contentMarginLeft); 
    // css({"margin-left": contentMarginLeft + "px"}); 
    }; 

    setValues(); 

    // This listens for a window scroll event and then handles the height and position of the sand in the Hourglass 
     $(window).scroll(function() { 

    // Calculating the position of the scrollbar 
    var doc = $("body"), 
     scrollPosition = $("body").scrollTop(), 
     pageSize = $("body").height(), 
     windowSize = $(window).height(), 
     fullScroll = pageSize - windowSize; 
     percentageScrolled = (scrollPosition/fullScroll); 

    // Calculating the Y-positions of the two sand piles 
    var topPosition = topStart+(22*percentageScrolled); 
    var bottomPosition = bottomStart-(22*percentageScrolled); 

    // Updating the sand piles 
      $('#top-sand').height(22-(22*percentageScrolled)+"%") 
      .css({top: topPosition+"%"}); 
     $('#bottom-sand').height(22*percentageScrolled+"%") 
      .css({top:bottomPosition+"%"}); 

     }); 

    // This listens for a window resize event and then reconfigures the layout 
    $(window).bind('resize', function() { 
    // Reconfigure layout 
    }); 

    }); 
    </script> 

그것은 사파리에서 잘 작동하고있어

(모든 너무 자주 글리치가 비록 여기서 상단 이미지 변경의 높이 있지만, y 위치입니다하지 않습니다)하지만 전혀 파이어 폭스에서 작동되지 않았습니다 . 여기에서 사이트를 볼 수 있습니다 http://www.chris-armstrong.com/ticktalk

저는 jQuery를 처음 접했기 때문에 완전히 멍청한 오류라고 사과합니다.

미리 감사드립니다.

Answer 1

좋아요, 제대로 작동합니다. 당신은 내가 많이 변경했기 때문에 내가 한 일을보기 위해 나의 근원을보아야 할 것이지만, 문제의 근본은 "스크롤 가능한"요소가 다른 플랫폼/브라우저에서 다르다는 사실에서 비롯된 것이다.

때때로 html 요소이며, 다른 경우는 body 요소입니다. 나는 그것을 처리하기 위해 scrollTo Plugin에서 몇 줄의 코드를 사용했다. 나는 모래 시계를 위치시키기 위해 CSS를 사용했다. 그리고 저는 모래가 움직이는 모습을주기 위해 컬러 블록을 사용했습니다. 더 이상 브라우저 크기 조정 이벤트를 처리 할 필요가 없습니다. IE에서 열중 할 수 있습니다.

여기는 working demo입니다.

Mac에서는 Safari와 FF로 테스트했지만 IE7 +에서는 올바르게 작동합니다.

<div id="hourglass"> 
    <img id="outline" src="img/hourglass-outline.png" width="634" height"1080" alt="Hourglass Outline" /> 
    <!-- A new image I created based on your two--> 
    <img id="sandy" src="hourglass-insides.png" width="634" height="1080" /> 
    <div class="mask" id="mask-top" ></div> 
    <img id="sandy-bottom" src="hourglass-insides.png" width="634" height="1080" /> 
</div> 

그리고 사람들을 위해 :

여기

<script type="text/javascript"> 
    $(function(){ 
    var low  = 28, 
     high  = 50, 
     max  = 86.5, 
     range = high - low, 
     $mtop = $("#mask-top"), 
     $mbottom = $("#sandy-bottom") 
     scroller = $()._scrollable(); // Uses part of the scrollTo plugin 

    $(window).scroll(function(e){ 
     var scrollTop = $(scroller).scrollTop(), 
      bodyHeight = document.body.scrollHeight, 
      itemHeight = $('#outline').outerHeight(); 

     var percentScrolled = scrollTop/(bodyHeight - itemHeight); 
     percentScrolled = Math.floor(percentScrolled * 100)/100; 

     var newHeight = (range * percentScrolled); 
     newHeight = Math.floor(newHeight * 10)/10; 

     $mtop.height((newHeight + low) + "%"); 
     $mbottom.css('top', (max - newHeight) + "%"); 
    }) 
    }) 
</script> 

내가 body의 자녀로 이동 업데이트 된 HTML입니다 : 여기

은 (scrollTo에서 조각을 포함하지 않음) jQuery 코드입니다 관심있는 사람은 여기 모래 시계를 배치하는 데 사용한 CSS를 사용합니다.

<style type="text/css" media="screen"> 
    #hourglass { 
    left: 0; top: 0; bottom: 0; right: 0; 
    } 
    #outline, #sandy, #sandy-bottom { 
    position: fixed; 
    top: 0; 
    height: 100%; 
    left: 50% !important; 
    margin: 0; 
    margin-left: 215px; 
    max-height: 100%; 
    min-height: 100%; 
    width: auto; 
    } 

    #sandy { 
    top: -32%; 
    } 

    #sandy-bottom { 
    top: 86.5%; 
    } 

    .mask { 
    background: #262B28; 
    position: fixed; 
    width: 100%; 
    left: 0; 
    right: 0; 
    } 
    #mask-top { 
    top: 0; 
    height: 28%; 
    } 
</style> 

Answer 2

어떤 생각을 숙고 :

1. 직접 CSS 값에 액세스하는 jQuery의 위치 방법을 선호합니다. 예를 들어 .css("top") 대신 .offset(), .position() 등을 사용하십시오. jQuery의 메서드는 여러 브라우저에서 이식 가능하며 문자열이 아닌 숫자를 반환합니다. http://docs.jquery.com/CSS을 참조하십시오.

   사례 적으로 : topStart = parseInt($('#top-sand').css('top')) 위와 그 밖의 많은 것들.

2. 당신이 CSS 속성을 통해 위치 메트릭을 취득해야하는 경우,

   에 확인 이

   (1) 항상 숫자, 예를 들어,로 변환 parseInt(). JavaScript의 문자열은 암묵적으로 숫자로 변환됩니다. 숫자로 취급하고자하는 것에 대해 항상 명시하십시오.

   (2)는 CSS 값에 단위가있는 경우를 설명합니다. '100px'와 같습니다.

   예 : var hourglassWidth = $('#hourglass #outline img').css('width').

3. 분수 값은주의하십시오. 위의 $('#hourglass').css({left:leftMargin+"px"})에서 leftMargin이 정수가 아닌 경우 어떻게됩니까? (소수점이 있습니까?)

4. 가장 좋은 방법은 방화 녀와 함께 단일 단계로 진행하고 줄마다 줄이 바뀔 때 위치 변수를 보는 것일 수 있습니다. 당신의 기대치와 비교하십시오.