Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Увеличение блока при скроллинге, и скрытие других (https://javascript.ru/forum/dom-window/68018-uvelichenie-bloka-pri-skrollinge-i-skrytie-drugikh.html)

Ява-Нуб 21.03.2017 09:45
Увеличение блока при скроллинге, и скрытие других
 
Доброго времени! Есть у меня 3 блока.


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

jQuery уже подключено. Буду рад любым советам, и примерам.

ksa 21.03.2017 10:32
Цитата:
Сообщение от Ява-Нуб
как сделать, чтобы при достижении "места прокрутки", ширина блока 2 была 100%.
Так его контент весь "уйдет" вверх при увеличении ширины родителя...
Как с этим быть?

рони 21.03.2017 10:39
scroll увеличение ширины блока до ширины окна
 
Ява-Нуб,
<!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>


Часовой пояс GMT +3, время: 14:24.