blocks|key|1984474|text|我想这个问题和你的问题相似吧？|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1984475|当元素位于视图端口时，您需要通过.addClass("zoom");将缩放类添加到元素中。|style|CODE|1984476|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/41144113/javascript-jquery-add-class-when-element-comes-into-viewport^0|2|4|0|0|G|I|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@$A|U|B|V|F|G]]|9|@]|C|$]]|$1|H|3|-4|5|6|7|W|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]]]

<p>I guess <a href="https://stackoverflow.com/questions/41144113/javascript-jquery-add-class-when-element-comes-into-viewport">this question</a> is similar to your problem?</p>

<p>You will need to add your zoom class to the element via <code>.addClass("zoom");</code> when it is in the viewport.</p>


blocks|key|1173827|text|嗯，不完全是这样。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1173828|我有这个|1173829|+++$(window).scroll(function+()+{
++++$('#currentContent').bind('inview',+monitor);
++++++++function+monitor(event,+visible)
++++++++{
++++++++++++if(visible)
++++++++++++{
+++++++++++++++++$(window).scroll(function+()+{
++++++++++++++++++++var+scroll+=+$(window).scrollTop();

++++++++++++++++++++$(".zoom").css({

++++++++++++++++++++++++backgroundSize:+(100+%2B+scroll+/+20)+%2B+"%25"

++++++++++++++++++++});
++++++++++++++++});

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

++++});|code-block|syntax|javascript|1173830|“问题”是var涡旋=+$(window).scrollTop()；我希望滚动变量不是从顶部开始，而是从添加类的div开始。我尝试过这个var滚动=+$('.currentContent').offset().top；但是什么也没有发生|1173831|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Well not that exactly.</p>

<p>i have this</p>

<pre><code>   $(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
            }
        }

    });
</code></pre>

<p>The "problem" is  var scroll = $(window).scrollTop();
I want the scroll variable to start not from TOP but from the div where i have add a class.
I have tried this  var scroll = $('.currentContent').offset().top;
But nothing happens</p>


blocks|key|1173870|text|检查这个：getBoundingClientRect()|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1173871|HTML
<div+class="wrap">
++<div+class="content">A</div>
++<div+class="content">B</div>
++<div+id="start"+class="content">C</div>
++<div+class="zoom"></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+%2B+(target.height+-+target.top)+/+20)+%2B+"%25"
++++});
++}
});|code-block|syntax|javascript|1173872|getBoundingClientRect()返回元素的大小及其相对于视图端口的位置。|style|CODE|1173873|您可以检查目标元素的位置并触发它。|1173874|演示：+https://jsfiddle.net/ghlee/uecb26ft|BOLD|1173875|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect|1|https://jsfiddle.net/ghlee/uecb26ft^0|5|N|0|0|0|0|N|0|0|0|3|4|Z|1|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@$A|12|B|13|1|14]]|C|$]]|$1|D|3|E|5|F|7|15|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|16|8|@$A|17|B|18|K|L]]|9|@]|C|$]]|$1|M|3|N|5|6|7|19|8|@]|9|@]|C|$]]|$1|O|3|P|5|6|7|1A|8|@$A|1B|B|1C|K|Q]]|9|@$A|1D|B|1E|1|1F]]|C|$]]|$1|R|3|-4|5|6|7|1G|8|@]|9|@]|C|$]]]|S|$T|$5|U|V|W|C|$X|Y]]|Z|$5|U|V|W|C|$X|10]]]]

<p>Check this: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect" rel="nofollow noreferrer">getBoundingClientRect()</a></p>

<pre><code>HTML
&lt;div class="wrap"&gt;
  &lt;div class="content"&gt;A&lt;/div&gt;
  &lt;div class="content"&gt;B&lt;/div&gt;
  &lt;div id="start" class="content"&gt;C&lt;/div&gt;
  &lt;div class="zoom"&gt;&lt;!-- Image --&gt;&lt;/div&gt;
&lt;/div&gt;


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

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

<p><code>getBoundingClientRect()</code> is returns the size of an element and its position relative to the viewport.  </p>

<p>You can check the target Element's position and trigger it.  </p>

<p><strong>Demo:</strong> <a href="https://jsfiddle.net/ghlee/uecb26ft" rel="nofollow noreferrer">https://jsfiddle.net/ghlee/uecb26ft</a></p>


blocks|key|1984600|text|这就是交叉口观测器所要做的。有了这个，你就可以观察元素，并在它们进入视图或相互交叉时做出反应。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1984601|首先，为IO设置选项：|1984602|let+options+=+{
++rootMargin:+'0px',
++threshold:+1.0
}

let+observer+=+new+IntersectionObserver(callback,+options);|code-block|syntax|javascript|1984603|如果您忽略了root选项，默认为浏览器窗口，因此一旦您观察的元素进入viewport，回调函数就会被触发。|style|CODE|1984604|然后指定要观察的元素：|1984605|设塔吉特=+document.querySelector('.zoom')；observer.observe(目标)；|1984606|在这里，我们现在观察每个元素与类缩放。|1984607|最后一步是定义回调函数：|1984608|let+callback+=+(entries,+observer)+=>+{+
++entries.forEach(entry+=>+{
++++//+Each+entry+describes+an+intersection+change+for+one+observed
++++//+target+element:
++++//+like:+$(element).addClass('zoom');
++});
};|1984609|您可以不观察某元素，如果您不再需要它，例如，如果您只想播放变焦动画只有一次，当它进入视图。|1984610|还可以在如何改变bg颜色上查看这个示例，具体取决于屏幕上可见元素的多少。编辑:也许是这个例子更贴切+(参见注释)，因为它实际上在用户滚动到元素时添加了一个类。|1984611|最后一点，您可以使用这个来自w3c的填充来支持旧的浏览器。|1984612|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API|1|https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/unobserve|2|https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Result|3|https://alligator.io/js/intersection-observer/|4|https://github.com/w3c/IntersectionObserver^0|3|6|0|0|0|0|6|4|0|0|0|0|0|0|3|6|1|0|4|8|2|16|7|3|0|A|A|4|0^^$0|@$1|2|3|4|5|6|7|1K|8|@]|9|@$A|1L|B|1M|1|1N]]|C|$]]|$1|D|3|E|5|6|7|1O|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|1P|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|1Q|8|@$A|1R|B|1S|M|N]]|9|@]|C|$]]|$1|O|3|P|5|6|7|1T|8|@]|9|@]|C|$]]|$1|Q|3|R|5|6|7|1U|8|@]|9|@]|C|$]]|$1|S|3|T|5|6|7|1V|8|@]|9|@]|C|$]]|$1|U|3|V|5|6|7|1W|8|@]|9|@]|C|$]]|$1|W|3|X|5|H|7|1X|8|@]|9|@]|C|$I|J]]|$1|Y|3|Z|5|6|7|1Y|8|@]|9|@$A|1Z|B|20|1|21]]|C|$]]|$1|10|3|11|5|6|7|22|8|@]|9|@$A|23|B|24|1|25]|$A|26|B|27|1|28]]|C|$]]|$1|12|3|13|5|6|7|29|8|@]|9|@$A|2A|B|2B|1|2C]]|C|$]]|$1|14|3|-4|5|6|7|2D|8|@]|9|@]|C|$]]]|15|$16|$5|17|18|19|C|$1A|1B]]|1C|$5|17|18|19|C|$1A|1D]]|1E|$5|17|18|19|C|$1A|1F]]|1G|$5|17|18|19|C|$1A|1H]]|1I|$5|17|18|19|C|$1A|1J]]]]

<p>This is what <a href="https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API" rel="nofollow noreferrer">Intersection Observer</a> was made to do. With this you can watch elements and react when they come into view or intersect with each other. </p>

<p>First you set the options for the IO: </p>

<pre><code>let options = {
  rootMargin: '0px',
  threshold: 1.0
}

let observer = new IntersectionObserver(callback, options);
</code></pre>

<p>If you leave out the <code>root</code> option it wall default to your browser window, so once an element that you watch comes into viewport, the callback function gets triggered. </p>

<p>Then you specify which elements you want to observe: </p>

<p>let target = document.querySelector('.zoom');
observer.observe(target);</p>

<p>Here we now watch every element with the class zoom. </p>

<p>Last step is to define the callback function: </p>

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

<p>You can <a href="https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/unobserve" rel="nofollow noreferrer">unobserve an element</a> if you don't need it anymore, for example if you only want to play the zoom animation only once when it comes into view. </p>

<p>Also check out this example on <a href="https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Result" rel="nofollow noreferrer">how to change bg-color</a> depending on how much of an element is visible on screen.
Edit: Maybe <a href="https://alligator.io/js/intersection-observer/" rel="nofollow noreferrer">this example is more fitting</a> (see comments) because it actually adds a class when user scrolls to the element. </p>

<p>Last point, you can use <a href="https://github.com/w3c/IntersectionObserver" rel="nofollow noreferrer">this polyfill from w3c</a> to support older browsers.</p>


blocks|key|1173978|text|要确定具有所需类的元素是否在视图端口(即滚动到)中，可以计算.start元素的偏移量，并将其与滚动体上的当前滚动值进行比较。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1173979|如果元素位于视图端口中，则可以缩放图像。当您到达时，下面的片段将增加图像大小。只要放大超过红色区域的高度。如果你向上滚动，它应该会变小。你可能想要一个不同的效果，但同样的想法适用。|1173980|另外，请参阅我在inViewport函数中的注释。|1173981|​|1173982|$(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+%2B+extra;
++var+elementBottom+=+elementTop+%2B+element.outerHeight();
++var+viewportTop+=+$(window).scrollTop();
++var+viewportBottom+=+viewportTop+%2B+$(window).height();
++return+elementBottom+>+viewportTop+&&+elementTop+<+viewportBottom;
};|code-block|syntax|javascript|1173983|#placeholder+{
++height:+300px;
++background-color:+red;
}

.start+{
++height:+50px;
++width:+50px;
}|1173984|<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"+/>|1173985|1173986|entityMap^0|U|6|0|0|8|A|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|10|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|14|8|@]|D|@]|E|$]]|$1|L|3|M|5|N|7|15|8|@]|D|@]|E|$O|P]]|$1|Q|3|R|5|N|7|16|8|@]|D|@]|E|$O|P]]|$1|S|3|T|5|N|7|17|8|@]|D|@]|E|$O|P]]|$1|U|3|K|5|6|7|18|8|@]|D|@]|E|$]]|$1|V|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|W|$]]

<p>To determine if an element with the desired class is in the viewport (i.e., been scrolled to), you could calculate the offset of the <code>.start</code> element and compare it with the current scroll value on scroll.</p>

<p>If the element is in the viewport, you could then zoom the image. The below snippet will increase the image size when you reach it. Just zoom past the height of the red area. If you scroll back up, it should get smaller. You may want a different effect, but the same idea applies.</p>

<p>Also, see my comments in the <code>inViewport</code> function.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(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 &gt; viewportTop &amp;&amp; elementTop &lt; viewportBottom;
};</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#placeholder {
  height: 300px;
  background-color: red;
}

.start {
  height: 50px;
  width: 50px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div id="placeholder"&gt;&lt;/div&gt;
&lt;img class="start" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" /&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1174026|text|你似乎走在正确的道路上。另外，您可能还需要注意background-size属性。而不是针对css+JavaScript属性强命名的backgroundSize，而是通过这样一个元素的style对象访问；currentElement.style.backgroundSize，您可能希望这样做；"background-size":+(100+%2B+scroll+/+20)+%2B+"%25。下面是一个基于现有代码的工作示例：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1174027|​|1174028|<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+%2B+scroll+/+10)+%2B+"%25"
++++++++});
++++++}
++++});
++</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>|code-block|syntax|javascript|1174029|1174030|entityMap^0|N|F|1U|E|2K|5|2U|Z|43|17|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|C]|$9|U|A|V|B|C]|$9|W|A|X|B|C]|$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|10|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|11|8|@]|D|@]|E|$K|L]]|$1|M|3|G|5|6|7|12|8|@]|D|@]|E|$]]|$1|N|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|O|$]]

<p>Well, you seem to be on the right path. You probably in addition need to pay attention to the <code>background-size</code> property. Instead of the JavaScript strongly named <code>backgroundSize</code> for the css <code>background-size</code> property, accessed through the <code>style</code> object of an element like this; <code>currentElement.style.backgroundSize</code>, you might want to do this; <code>"background-size": (100 + scroll / 20) + "%</code>. Here's a working example that builds upon your existing code:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;title&gt;My page&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;h1 id="start"&gt;My Zoom Heading&lt;/h1&gt;
  &lt;p class="zoom"&gt;My zoom area&lt;/p&gt;

  &lt;script&gt;
    $(window).scroll(function() {
      var scroll = $(window).scrollTop();
      var zoomStart = $("#start").offset().top;

      if (scroll &gt;= zoomStart) {
        $(".zoom").css({
          "background-size": (100 + scroll / 10) + "%"
        });
      }
    });
  &lt;/script&gt;

  &lt;style&gt;
    #start {
      margin-top: 60px;
    }
    
    .zoom {
      margin-top: 10px;
      margin-bottom: 300px;
      width: 300px;
      height: 300px;
      background: url('{some-image-url-here}') no-repeat;
    }
  &lt;/style&gt;

&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>


<p>i am new to Javascript and i would like your help.
I have a code and when you scroll from the top of a page changes css of a class and zooms the images.</p>

<p>What i would like to do is, to put a class in a div ( lets say .start) and  when i reach to that class then to start zoom the image.</p>

<pre><code>$(window).scroll(function () {
    var scroll = $(window).scrollTop();

    $(".zoom").css({

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

    });
});
</code></pre>


How can i trigger a css class when a reach to a specific div with scroll

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我是Javascript的新手，我需要你的帮助。我有一个代码，当您从页面顶部滚动时，更改类的css并缩放图像。我想做的是，把一个类放到div中(假设是.start)，当我到达那个类时，开始缩放图像。$(window).scroll(function () {    var scroll = $(window).scro...

问我如何触发css类时，到达特定的div与卷轴。
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我如何触发css类时，到达特定的div与卷轴。EN