如何在滚动到特定部分的同时从选定的CLASS获取ID [英] How to get ID from selected CLASS while scrolling to perticular Section

问题描述

当我在Parallax网站上滚动我的网页时，我试图获得部分ID。
当滚动结束时，我想要选择该部分的ID。

HTML

 < section id =section1class =content> 
等等等等
< / section> 
< section id =section2class =content> 
等等等等
< / section> 
< section id =section3class =content> 
等等等等
< / section> 
< section id =section4class =content> 
等等等等
< / section> 
  

JQUERY
< （$（window）.scrollTop（）> = $（'。content'）的pre $ $（window）.bind（'scroll'，function（）{
（）;
alert（'end reached'）;
//如何在这里获取ID我尝试过像这样但没有结果：
//$(this).attr(\"id）;
//$(this).closest(\"section\" ).attr(\"id）;
}
}）;


解决方案

您可以使用 .filter （）， Element.getBoundingClientRect（）， parseInt（）， .prev（）， .is（）来检查元素 .bottom 大于或等于元素的高度。如果previous元素与过滤元素具有相同的 .className ，则将变量设置为上一元素，否则将元素设置为集合中的最后一个元素。

  var content = $（。content）; 
 $（window）.on（scroll，function（e）{
 var el = content.filter（function（i，el）{
 return el.getBoundingClientRect（）。bottom > = parseInt（$（el）.css（height））
}）
，sectionId = el.prev（。content）。is（content）
？el .prev（。content）。attr（id）
：content.eq（-1）.attr（id）; 
 console.log（sectionId）; 
 }）。滚动（）; 
  

  var content = $（。content）; $（window）.on（scroll，function（e）{var el = content.filter（function（i，el）{return el.getBoundingClientRect ）.bottom> = parseInt（$（el）.css（height））}），sectionId = el.prev（）。is（content）？el.prev（。content）。attr（id ）：content.eq（-1）.attr（id）; console.log（sectionId）;}）。scroll（）;  

  .content {height：200px; display：block;}： 

< script src = https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\"></script><section id =section1class =content> blah blah< / section>< section id =section2class =content> blah blah< / section>< section id =section3class =content> blah blah< / section>< section id =section4class =content> blah blah< / section>

Im trying to get ID of section when I'm scrolling my webpage in Parallax website. When scroll will hit end of section then I want to take ID of that selected section.

HTML

<section id="section1" class="content" >
    blah blah
</section>
<section id="section2" class="content" >
    blah blah
</section>
<section id="section3" class="content" >
    blah blah
</section>
<section id="section4" class="content" >
    blah blah
</section>

JQUERY

$(window).bind('scroll', function() {
        if($(window).scrollTop() >= $('.content').offset().top + $('.content').outerHeight() - window.innerHeight) {
          alert('end reached');
          //How to get ID here I have tried like this but no result:
            //$(this).attr("id");
            //$(this).closest("section").attr("id"); 
        }
});

解决方案

You can use .filter(), Element.getBoundingClientRect(), parseInt(), .prev(), .is() to check if element .bottom is greater than or equal to height of element. If previous element has same .className as filtered element, set variable to previous element, else to last element in collection.

var content = $(".content");
$(window).on("scroll", function(e) {
    var el = content.filter(function(i, el) {
      return el.getBoundingClientRect().bottom >= parseInt($(el).css("height"))
    })
    , sectionId = el.prev(".content").is(content) 
                  ? el.prev(".content").attr("id") 
                  : content.eq(-1).attr("id");
    console.log(sectionId);
}).scroll();

var content = $(".content");
$(window).on("scroll", function(e) {
    var el = content.filter(function(i, el) {
      return el.getBoundingClientRect().bottom >= parseInt($(el).css("height"))
    })
    , sectionId = el.prev().is(content) 
                  ? el.prev(".content").attr("id") 
                  : content.eq(-1).attr("id");
    console.log(sectionId);
}).scroll();

.content {
  height:200px;
  display:block;
}:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="section1" class="content" >
   blah blah
</section>
<section id="section2" class="content" >
    blah blah
</section>
<section id="section3" class="content" >
    blah blah
</section>
<section id="section4" class="content" >
    blah blah
</section>

这篇关于如何在滚动到特定部分的同时从选定的CLASS获取ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！