Форум

Ява-Нуб · #1 (**permalink**) 21.03.2017, 09:45

Доброго времени! Есть у меня 3 блока.

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

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

ksa · #2 (**permalink**) 21.03.2017, 10:32

Сообщение от Ява-Нуб

как сделать, чтобы при достижении "места прокрутки", ширина блока 2 была 100%.

Так его контент весь "уйдет" вверх при увеличении ширины родителя...
Как с этим быть?

рони · #3 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript