창 스크롤에서 div 너비 변경

차고 문과 같이 div에 javascript 효과를 적용하려고합니다.
기본적으로 전방에는 절대 div가 있고 앞면에는 window school의 바닥에서 꼭대기까지 줄어드는 div가 있습니다.창 스크롤에서 div 너비 변경

나는 비슷한 jsfiddle을 발견했으나 높이 대신 폭에서이를 수행하고 있으며 div top가 고정 된 채로 아래에서 위로 축소되도록하고 싶습니다.

JSFiddle Code

HTML 
<div id="added"> 

<div id="container"> 
    My center div... 
</div> 

</div> 

CSS 
#added { 
    background: #eee; 
    height: 2000px; 
    overflow:hidden; 
} 
#container { 
    width: 800px; 
    height: 2000px; 
    background-color: #567; 
    margin: 0 auto; 
    position:relative; 
} 

JS 
$(window).resize(function() { 
    $('#container').css({ 
     top: ($(window).height() - $('#container').outerHeight())/2 
    }); 
}); 



// To initially run the function: 
$(window).resize(); 


var $scrollingDiv = $("#container"); 
$(window).scroll(function() { 
    var winScrollTop = $(window).scrollTop() + 0, 
     zeroSizeHeight = $(document).height() - $(window).height(), 
     newSize = 800 * (1 - (winScrollTop/zeroSizeHeight)); 

    $scrollingDiv.css({ 
     width: newSize, 
     "marginTop": winScrollTop + "px" 
    }, 500, 'easeInOutSine'); 
});

어떤 도움

는 이해할 수있을 것이다.

는

출처

2013-06-21 onlymushu

당신은 그것을 시도 할 수 있습니다 감사합니다 :

var $scrollingDiv = $("#container"), 
    defaultHeight = parseInt($scrollingDiv.css('height')); // whatever is in your css as 
$(window).scroll(function() { 
    var winScrollTop = $(window).scrollTop() + 0, 
     zeroSizeHeight = $(document).height() - $(window).height(), 
     newSize = defaultHeight * (1 - (winScrollTop/zeroSizeHeight)); 

    $scrollingDiv.css({ 
     height: newSize, 
     "marginTop": winScrollTop + "px" 
    }, 500, 'easeInOutSine'); 
});

출처

2013-06-21 14:15:11 Tronix117

Tronix에게 감사드립니다, 그것이 내가 원하는 것입니다. 지금은 div와 함께 텍스트를 사라지게하는 유일한 방법이 있습니까? 큰 고마워. – onlymushu

나는 당신이 의미하는 것을 정말로 얻지 못한다. div가 작아지면, 텍스트는 숨겨져 야한다, 안 그래? 그렇지 않으면이 div에 CSS :'overflow : hidden'을 추가하십시오. – Tronix117

괜찮습니다. 또한 JSFiddle에서 꽤 잘 작동하지만 크롬이나 다른 브라우저에서는 작동하지 않습니다. 감사합니다 – onlymushu

그것은 자동으로 자바 스크립트

을 적용 할 필요 스크롤 막대를 추가하지 auto

CSS

#added { 
     background: #eee; 
     height: auto; 
     width: auto; 
     }

에 모두 설정

출처

2013-06-21 14:33:11 Amol

나에게 득표의 이유를 줘? – Amol

창 스크롤에서 div 너비 변경

답변

관련 문제