스크롤의 페이딩 요소

Question

사용자가 페이지를 아래로 스크롤 할 때 페이드 (또는 불투명도를 변경) 할 수있는 div (또는 실제로 무엇이든)를 만들 수있는 방법이 궁금합니다. 이 div는 페이지 상단에 앉아 있지만 페이지 상단에있을 때만 명확하게 볼 수 있습니다.

또한, II가 페이지의 현재 스크롤 된 위치에 관계 없이이 요소가 OnMouseOver에 다시 페이드를하게 할 수 있다면 이상적입니다.

Answer 1

jQuery 대부분의 브라우저 불일치를 숨기면서 간결한 솔루션을 허용합니다. 시작하기위한 간단한 모형이 있습니다.

<script type="text/javascript">

    //when the DOM has loaded
    $(document).ready(function() {

        //attach some code to the scroll event of the window object
        //or whatever element(s) see http://docs.jquery.com/Selectors
        $(window).scroll(function () {
              var height = $('body').height();
              var scrollTop = $('body').scrollTop();
              var opacity = 1;

              // do some math here, by placing some condition or formula
              if(scrollTop > 400) {
                  opacity = 0.5;
              }

              //set the opacity of div id="someDivId"
              $('#someDivId').css('opacity', opacity);
        });
    });
</script>

또한보십시오:

• jQuery
• 선택기
• CSS
• 이벤트/스크롤
• CSS/SCROLLTOP
• CSS/Scrollleft

Answer 2

나는 불투명도 수준을 지시하기 위해 스크롤 탑의 실제 값을 사용하여 그것을 줄 것이라고 생각했습니다. 또한 두 번째 부분의 호버 상태를 추가했습니다. David에게 감사합니다 나를 위해 수학을 개선하기 위해.

//reduce the opacity of the banner if the page is scrolled.
$(window).scroll(function () {
  var height = $("body").height();
  var scrollTop = $("body").scrollTop();
  var opacity = 1;

  if(scrollTop < 41)
    {opacity = 1-Math.floor(scrollTop)/100;}
    else
    {opacity = 0.6;}

  $("#header").css("opacity", opacity);
  $("#header").hover(function(){
    $(this).css("opacity", 1);
    },function(){
    $(this).css("opacity", 0.6);
    });
});

Answer 3

스크롤 이벤트를 사용하고 Document.DocumentElement.scrolltop의 값을 분석하여 적절한 불투명도를 설정하십시오.http://www.quirksmode.org/dom/events/scroll.html