Я хочу изменить размер изображения с помощью прокрутки; однако моя функция кажется неправильной. Я не могу использовать, если условие правильно

Question

Я хочу изменить размер изображения с помощью прокрутки. Тем не менее, проблема, кажется, в моей функции. Я не могу правильно использовать условие if.

Я хочу, чтобы результат был похож на веб-сайт Apple: https://www.apple.com/iphone-11/

jQuery(window).scroll(function () {
    var imageWidth = jQuery("img#big").width();
    var stopImage = jQuery("img#big").width(800);

    if (imageWidth >= stopImage) {
        var s = imageWidth - Math.min(imageWidth, $(document).scrollTop() * 20);
        jQuery("img#big").width(s);
    }
});

Answer 1

Рассмотрим следующий код.

jQuery(function($) {
  var position = $(window).scrollTop();
  $(window).on("scroll mousewheel", function(e) {
    var dir = false;
    if (e.type == "mousewheel") {
      dir = e.originalEvent.wheelDelta >= 0;
      // True = Up; False = Down
    } else {
      var scroll = $(window).scrollTop();
      dir = !(scroll > position);
      // True = Up; False = Down
    }
    var imageWidth = $("img#big").width();
    var stopImage = 800;

    console.log(e.type, dir, imageWidth, stopImage);

    if (imageWidth >= stopImage && !dir) {
      var s = imageWidth - Math.min(imageWidth, $(document).scrollTop() * 20);
      $("img#big").width(s);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img id="big" style="width: 1600px; min-width: 800px;" src="https://i.imgur.com/4ILisqH.jpg" />

Возможно, вы захотите узнать направление прокрутки пользователем. Если вы хотите увеличить размер.

Вы можете ограничить сжатие с помощью оператора if() или CSS с помощью min-width.

Answer 2

Итак, я попытался повторить проблему. Кажется, используемый вами множитель - это большее значение, чем нужно.

scrollTop () * 0.5 или scrollTop () * 2

jQuery(window).scroll(function () {
                                var imageWidth = jQuery("img#big").width();
                                var stopImage =800;

                            if (imageWidth >= stopImage) {
                                var s = imageWidth - Math.min(imageWidth, $(document).scrollTop() * 0.5);

                                jQuery("img#big").width(s);
                            }

                        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img id="big" src="https://images.pexels.com/photos/1660995/pexels-photo-1660995.jpeg?cs=srgb&dl=orange-lighthouse-1660995.jpg&fm=jpg">