Question

我是Java语言的新手，希望获得您的帮助。我有一个代码，当您从页面顶部滚动时，将更改类的CSS并缩放图像。

我想做的是，将一个班级放入div（比如说.start）中，当我到达该班级时，然后开始缩放图像。

$(window).scroll(function () {
    var scroll = $(window).scrollTop();

    $(".zoom").css({

        backgroundSize: (100 + scroll / 20) + "%"

    });
});

Answer 1

我猜this question与您的问题类似？

在视口中，您需要通过.addClass("zoom");将缩放类添加到元素。

Answer 2

不是那样。

我有这个

   $(window).scroll(function () {
    $('#currentContent').bind('inview', monitor);
        function monitor(event, visible)
        {
            if(visible)
            {
                 $(window).scroll(function () {
                    var scroll = $(window).scrollTop();

                    $(".zoom").css({

                        backgroundSize: (100 + scroll / 20) + "%"

                    });
                });

            }
            else
            {
            // element has gone out of the viewport
            }
        }

    });

“问题”是var scroll = $（window）.scrollTop（）; 我希望滚动变量不是从TOP开始，而是从我添加一个类的div开始。我已经尝试过这个var scroll = $（'。currentContent'）。offset（）。top; 但是什么也没发生

Answer 3

检查以下内容：getBoundingClientRect()

HTML
<div class="wrap">
  <div class="content">A</div>
  <div class="content">B</div>
  <div id="start" class="content">C</div>
  <div class="zoom"><!-- Image --></div>
</div>


JS
$(window).scroll(function () {
var target = $('#start')[0].getBoundingClientRect(); // id="start" Element

  // Start zoom at #start element's position
  if (target.top - target.height <= 0) {
    $(".zoom").css({
      backgroundSize: (100 + (target.height - target.top) / 20) + "%"
    });
  }
});

getBoundingClientRect()是返回元素的大小及其相对于视口的位置。

您可以检查目标元素的位置并触发它。

演示： https://jsfiddle.net/ghlee/uecb26ft

Answer 4

这就是Intersection Observer要做的。这样，您就可以观察元素并在它们出现或相交时做出反应。

首先，您要设置IO的选项：

let options = {
  rootMargin: '0px',
  threshold: 1.0
}

let observer = new IntersectionObserver(callback, options);

如果省略了root选项，它将默认显示在浏览器窗口中，因此一旦您观看的元素进入视口，就会触发回调函数。

然后您指定要观察的元素：

让target = document.querySelector（'。zoom'）; rator.observe（target）;

在这里，我们现在使用类zoom观看每个元素。

最后一步是定义回调函数：

let callback = (entries, observer) => { 
  entries.forEach(entry => {
    // Each entry describes an intersection change for one observed
    // target element:
    // like: $(element).addClass('zoom');
  });
};

如果您不再需要unobserve an element，例如，您只想在缩放动画出现时播放一次，则可以使用how to change bg-color。

还要根据屏幕上可见的元素数量，在this example is more fitting上查看此示例。编辑：也许this polyfill from w3c（请参阅注释），因为当用户滚动到元素时，它实际上添加了一个类。

最后，您可以使用Locator Strategies支持较旧的浏览器。

Answer 5

要确定具有所需类的元素是否在视口中（即已滚动到），可以计算.start元素的偏移量并将其与滚动时的当前滚动值进行比较。

如果元素在视口中，则可以缩放图像。当您到达以下片段时，将增加图像的大小。只需放大红色区域的高度即可。如果向上滚动，它应该变小。您可能希望获得不同的效果，但是适用相同的想法。

此外，请在inViewport函数中查看我的评论。

$(window).scroll(function() {
  if (inViewport($(".start"))) {
    $(".start").css("height", "200px").css("width", "200px");
  } else {
    $(".start").css("height", "50px").css("width", "50px");
  }
});

function inViewport(element) {
  // added extra height so you can see the element change back to smaller size
  // you could remove this value if you just want the element to change size when out of the viewport
  const extra = 50;
  var elementTop = element.offset().top + extra;
  var elementBottom = elementTop + element.outerHeight();
  var viewportTop = $(window).scrollTop();
  var viewportBottom = viewportTop + $(window).height();
  return elementBottom > viewportTop && elementTop < viewportBottom;
};

#placeholder {
  height: 300px;
  background-color: red;
}

.start {
  height: 50px;
  width: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="placeholder"></div>
<img class="start" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" />

Answer 6

好吧，您似乎在正确的道路上。您可能还需要注意background-size属性。通过CSS这样的元素backgroundSize的{{1}}对象访问的JavaScript而不是css background-size属性的强命名style； currentElement.style.backgroundSize，您可能想这样做； "background-size": (100 + scroll / 20) + "%。这是一个基于您现有代码的有效示例：

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

<head>
  <title>My page</title>
</head>

<body>
  <h1 id="start">My Zoom Heading</h1>
  <p class="zoom">My zoom area</p>

  <script>
    $(window).scroll(function() {
      var scroll = $(window).scrollTop();
      var zoomStart = $("#start").offset().top;

      if (scroll >= zoomStart) {
        $(".zoom").css({
          "background-size": (100 + scroll / 10) + "%"
        });
      }
    });
  </script>

  <style>
    #start {
      margin-top: 60px;
    }
    
    .zoom {
      margin-top: 10px;
      margin-bottom: 300px;
      width: 300px;
      height: 300px;
      background: url('{some-image-url-here}') no-repeat;
    }
  </style>

</body>

</html>

使用滚动

6 个答案: