Вход

Просмотр полной версии : Увеличение блока при скроллинге, и скрытие других

Ява-Нуб
21.03.2017, 09:45
Доброго времени! Есть у меня 3 блока.
http://myhost.beget.tech/1.png

Подскажите пожалуйста, как сделать, чтобы при достижении "места прокрутки", ширина блока 2 была 100%. А при обратном движении(когда кручу колесо мыши обратно) все возвращалось...

jQuery уже подключено. Буду рад любым советам, и примерам.
ksa
21.03.2017, 10:32
как сделать, чтобы при достижении "места прокрутки", ширина блока 2 была 100%.
Так его контент весь "уйдет" вверх при увеличении ширины родителя...
Как с этим быть?
рони
21.03.2017, 10:39
Ява-Нуб,
<!DOCTYPE html>

<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
height:2000px;
margin:0;
padding:0;
}

.hot{
padding:0;
height:2000px;
width:200px;
margin:0 auto;
background-color:#FF00FF;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(function() {
var el = $(".hot"), from = el.width(), height = 500;
$(window).on("scroll resize", function() {
var to = $(window).width()-2, a = $(window).scrollTop() / height;
a > 1 && (a = 1);
var w = from + (to - from) * a | 0;
el.width(w)
})
});
</script>
</head>

<body>

<div class="hot"></div>

</body>
</html>