Изменение ширины div на прокрутке окна

Я пытаюсь сделать эффект javascript на div как дверь гаража.
В принципе у меня был бы абсолютный div на спине и еще один div на фронте, который сжимался бы от нижней до верхней базы в оконной школе.Изменение ширины div на прокрутке окна

Я нашел подобный jsfiddle, но он делает это по ширине вместо этого на высоте, и я бы хотел, чтобы верхняя часть div оставалась неподвижной и сжималась снизу вверх.

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 становится маленьким, текст должен быть скрыт, не так ли? В противном случае попробуйте добавить CSS: 'overflow: hidden' в этот div. – Tronix117

Теперь он работает нормально. Кроме того, это я или он не работает на хром или в любом браузере, хотя он отлично работает на JSFiddle. Спасибо – onlymushu

Установите оба в auto

CSS

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

Это автоматически добавить полосы прокрутки нет необходимости применять Java Script

источник

2013-06-21 14:33:11 Amol

Дайте мне основание для голосования -ve? – Amol

Изменение ширины div на прокрутке окна

ответ

Смежные вопросы