检查元素是否在视口的30％和60％之间 [英] Check if element is between 30% and 60% of the viewport

查看：122
本文介绍了检查元素是否在视口的30％和60％之间的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我尝试改变< li> 元素在视口的30％到60％之间的颜色。



所以我有这个网格的元素堆叠并排，像这样：





我遇到过几个插件，例如Waypoints，Viewport Checker和其他几个， / p>

有什么想法吗？



我使用了一个非常简单的结构：



JSFIDDLE



HTML 

 <！doctype html& 
 
< html lang =en> 
 
< head> 
< meta charset =utf-8> 
 
< title>< / title> 
< meta name =descriptioncontent => 
< meta name =authorcontent => 
< link rel =stylesheethref =css / reset.css> 
< link rel =stylesheethref =css / styles.css> 
< script src =http://code.jquery.com/jquery-latest.min.jstype =text / javascript>< / script> 
< script src =js / main.js>< / script> 
<！ -  [if lt IE 9]> 
< script src =http://html5shiv.googlecode.com/svn/trunk/html5.js>< / script> 
<！[endif]  - > 
< / head> 
 
< body> 
< ul> 
< li>< / li> 
< li>< / li> 
< li>< / li> 
< li>< / li> 
< li>< / li> 
< li>< / li> 
< li>< / li> 
< li>< / li> 
< li>< / li> 
< li>< / li> 
< li>< / li> 
< li>< / li> 
< li>< / li> 
< li>< / li> 
< li>< / li> 
< li>< / li> 
< li>< / li> 
< li>< / li> 
< li>< / li> 
< / ul> 
< / body> 
 
< / html>

CSS： 

  ul {
 margin：auto; 
} 
 ul li {
 width：300px; 
 height：200px; 
 background：＃f5f5f5; 
 float：left; 
 margin：10px; 
} 
 
 ul li.middleviewport {
 background：red; 
}


解决方案


  1. 在窗口上使用滚动事件处理程序

  2. c $ c> li 元素检查元素是否在感兴趣的视口中

  3. 获取 li top ，并检查它是否在感兴趣的视口部分。

演示：



更改了 li 用于演示目的。



在代码中内嵌的注释。



 

  ul {margin： list-style-type：none; padding：0;} ul li {width：50px; height：30px;背景：＃f5f5f5; float：left; margin：10px; text-align：center; padding-top：10px} ul li.middleviewport {background：red;}  

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js>< / script>< ul> < li> 1< / li> < li> 2< / li> < li> 3< / li> < li> 4< / li> < li> 5< / li> < li> 6< / li> < li> 7< / li> < li> 8< / li> < li> 9< / li> < li> 10< / li> < li> 11< / li> < li> 12< / li> < li> 13< / li> < li> 14< / li> < li> 15< / li> < li> 16< / li> < li> 17< / li> < li> 18< / li> < li> 19< / li> < li> 20< / li> < li> 1< / li> < li> 2< / li> < li> 3< / li> < li> 4< / li> < li> 5< / li> < li> 6< / li> < li> 7< / li> < li> 8< / li> < li> 9< / li> < li> 10< / li> < li> 11< / li> < li> 12< / li> < li> 13< / li> < li> 14< / li> < li> 15< / li> < li> 16< / li> < li> 17< / li> < li> 18< / li> < li> 19< / li> < li> 20< / li> < li> 1< / li> < li> 2< / li> < li> 3< / li> < li> 4< / li> < li> 5< / li> < li> 6< / li> < li> 7< / li> < li> 8< / li> < li> 9< / li> < li> 10< / li> < li> 11< / li> < li> 12< / li> < li> 13< / li> < li> 14< / li> < li> 15< / li> < li> 16< / li> < li> 17< / li> < li> 18< / li> < li> 19< / li> < li> 20< / li> < li> 1< / li> < li> 2< / li> < li> 3< / li> < li> 4< / li> < li> 5< / li> < li> 6< / li> < li> 7< / li> < li> 8< / li> < li> 9< / li> < li> 10< / li> < li> 11< / li> < li> 12< / li> < li> 13< / li> < li> 14< / li> < li> 15< / li> < li> 16< / li> < li> 17< / li> < li> 18< / li> < li> 19< / li> < li> 20< / li>< / ul>


I am trying to change the color of <li> elements when they are between 30% and 60% of the viewport.

So I have this grid of elements stacking side by side like this:

I ran into few plugins like Waypoints, Viewport Checker and few others but nothing good.

Any idea?

I am using a pretty simple structure :

JSFIDDLE

HTML

<!doctype html>

<html lang="en">

<head>
    <meta charset="utf-8">

    <title></title>
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/styles.css">
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="js/main.js"></script>
    <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

</html>

CSS:

ul {
    margin: auto;
}
ul li {
    width: 300px;
    height: 200px;
    background: #f5f5f5;
    float: left;
    margin: 10px;
}

ul li.middleviewport{
    background:red;
}

解决方案

  1. Use scroll event handler on window
  2. Loop over all the li elements to check if the element is in the interested viewport
  3. Get the li position from top and check if it is in the interested viewport section.

Demo:

Changed the height of li for demo purpose.

See the comments inline in the code.

$(document).ready(function() {
  // Get viewport height, gridTop and gridBottom
  var windowHeight = $(window).height(),
    gridTop = windowHeight * .3,
    gridBottom = windowHeight * .6;

  $(window).on('scroll', function() {
    // On each scroll check if `li` is in interested viewport
    $('ul li').each(function() {
      var thisTop = $(this).offset().top - $(window).scrollTop(); // Get the `top` of this `li`

      // Check if this element is in the interested viewport
      if (thisTop >= gridTop && (thisTop + $(this).height()) <= gridBottom) {
        $(this).css('background', 'red');
      } else {
        $(this).css('background', 'gray');
      }
    });
  });
});

ul {
  margin: 0;
  list-style-type: none;
  padding: 0;
}
ul li {
  width: 50px;
  height: 30px;
  background: #f5f5f5;
  float: left;
  margin: 10px;
  text-align: center;
  padding-top: 10px
}
ul li.middleviewport {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
</ul>

这篇关于检查元素是否在视口的30％和60％之间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆