Vérifier si l'élément est entre 30% et 60% de la fenêtre d'affichage

Je suis en train de changer la couleur de <li> éléments lorsqu'ils sont entre 30% et 60% de la fenêtre d'affichage.

Donc, j'ai cette grille d'éléments d'empilage côte à côte comme ceci:

J'ai couru dans quelques plugins comme des Waypoints, Fenêtre d'affichage Checker et quelques autres, mais rien de bon.

Une idée?

Je suis l'aide d'une jolie structure simple :

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;
}

Veuillez fournir le code source de travailler sur
Nice visual question, il suffit d'ajouter le code comme @AndreaLigios mentionné et votre question est parfait.
Je suis entrain de créer un jsfiddle! Désolé pour le manque d'éléments, il est encore à un stade précoce.

InformationsquelleAutor Hook | 2015-04-27

Utilisation scroll gestionnaire d'événement sur window
En boucle sur toutes les li éléments à vérifier si l'élément est dans l'intérêt de fenêtre de la
Obtenir le li position de top et vérifier si elle est dans l'intérêt de fenêtre de la section.

Démo:

Changé la hauteur de li pour la démo but.

Voir les commentaires en ligne dans le code.

JS:

$(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');
      }
    });
  });
});

CSS:

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;
}

HTML:

<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>

InformationsquelleAutor Tushar

Amélioré @Tushar la solution pour le faire fonctionner, même après un redimensionnement de la fenêtre (un recalcul de la fenêtre d'affichage est nécessaire à chaque fois, pas seulement au début), et pour la faire démarrer l'a déjà souligné, sans avoir à faire défiler.

Également amélioré un peu le graphique de l'exemple pour mettre en surbrillance la région intéressée.

L'exécution de démo

JS:

$(document).ready(function() {
$(window).on('scroll', function() {
var windowHeight = $(window).height(),
gridTop = windowHeight * .3,
gridBottom = windowHeight * .6;
$('ul li').each(function() {
var thisTop = $(this).offset().top - $(window).scrollTop();
if (thisTop > gridTop && (thisTop + $(this).height()) < gridBottom) {
$(this).css('background', 'red');
} else {
$(this).css('background', 'silver');
}
});
});
$(window).trigger('scroll');
});

CSS:

ul {
margin: auto;
}
ul li {
width: 300px;
height: 10px;
background: silver;
float: left;
margin: 10px;
list-style: none;
}
ul li.middleviewport {
background: red;
}
#viewportMask {
position: fixed;
top: 30%;
bottom: 40%;
left: 0;
right: 0;
background: red;
opacity: 0.2;
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="viewportMask"></div>
<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>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

Bon! 1 problème lorsque l'utilisateur n'est jamais aller pour redimensionner la fenêtre, ce sera plus lent. Plutôt que de déclencher scroll, vous pouvez appeler la fonction de rappel en l'appelant function() {}()); comme ça.
$(window).sur().trigger() peut être utilisé aussi. (chaînage)

InformationsquelleAutor Andrea Ligios

[[ Cet exemple vérifie si une partie de l'élément est à l'intérieur de la zone spécifiée ]]

Lorsque vous avez le haut et le bas des coordonnées de deux cases, vous pouvez vérifier si les deux zones de chevauchement en cochant:

box1.top < box2.bottom && box1.bottom > box2.top

Dans l'exemple suivant, bloc1 est de 30% à 60% de la partie de la fenêtre lors du box2 est chaque élément de la liste. Ajouter de l'anti-rebond de la fonction et nous avons:

JS:

var timeout;
$(window).on("load scroll resize", function() {
if (timeout) {
clearTimeout(timeout);
}
timeout = setTimeout(function() {
var $window = $(window),
hitbox_top = $window.scrollTop() + $window.height() * .3,
hitbox_bottom = $window.scrollTop() + $window.height() * .6;
$("li").each(function() {
var $element = $(this),
element_top = $element.offset().top,
element_bottom = $element.offset().top + $element.height();
$element.toggleClass("middle-viewport", hitbox_top < element_bottom && hitbox_bottom > element_top);
});
}, 200);
});

CSS:

#overlay {
position: fixed;
left: 0;
top: 30%;
width: 100%;
height: 30%;
background-color: rgba(0, 192, 255, .5);
}
ul {
padding: 0;
text-align: center;
}
li {
display: inline-block;
margin: 10px;
width: 200px;
height: 200px;
background-color: #F5F5F5;
}
li.middle-viewport {
background-color: #FF0000;
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="overlay"></div>
<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>
<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>

InformationsquelleAutor Salman A

0

Créer un div de largeur width:100% et height:100% qui représentent la fenêtre d'affichage. À l'intérieur de ce div, vous placez votre système de grille.

Que vous avez besoin pour utiliser jquery .position() jquery position
```
var grid = $( "griddiv's" );
var position = grid.position();
var height = $('parentdiv').height();
lower = 0.3 * height;
upper = 0.6 * height;
if(grid.top >= lower && grid.top <= upper){
$('gridcell').css('background','red');
}
```
Je n'ai pas tester, mais j'espère que cela fonctionne

InformationsquelleAutor Vinc199789

J'étais libre de créer un plugin pour cela. Dans les options, vous pouvez définir des pourcentages, classe css, événement déclencheur, et le délai d'exécution (css changé de réactifs pour la présentation uniquement):

JS:

jQuery.fn.extend({
markInViewport: function (options) {
var that = this;
this.defaults = {
percentTop: 30,
percentBottom: 40,
cssClass: 'middleviewport',
event: 'scroll resize',
delay: 10
};
this.options = $.extend(that.defaults, options);
this.win = $(window);
this.delayChecking = null;
this.items = [];
this.checkItems = function (items) {
clearTimeout(that.delayChecking);
that.delayChecking = setTimeout(function () {
var thisWindowHeight = that.win.height();
var thisWindowScrollTop = that.win.scrollTop();
that.items.each(function (j) {
var thisItem = $(this);
var thisItemHeight = thisItem.outerHeight();
var thisItemPositionTop = thisItem.offset().top;
var currentPercentTop = (thisItemPositionTop - thisWindowScrollTop) / thisWindowHeight * 100;
var currentPercentBottom = (thisWindowScrollTop + thisWindowHeight - thisItemPositionTop - thisItemHeight) / thisWindowHeight * 100;
thisItem.toggleClass(that.options.cssClass, currentPercentTop >= that.options.percentTop && currentPercentBottom >= that.options.percentBottom);
});
}, that.options.delay);
};
return this.each(function () {
that.items = that.children();
$(window).on(that.options.event, that.checkItems);
that.checkItems();
});
}
});
$('.check_viewport').markInViewport();

CSS:

ul {
margin: 0 auto;
padding: 0;
}
ul li {
width: 32.73%;
height: 0;
padding-bottom: 3.5%; /* responsive height */
background: #f5f5f5;
float: left;
margin: .3%;
list-style:none;
}
ul li.middleviewport {
background:red;
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<ul class="check_viewport">
<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><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>

Violon ici

InformationsquelleAutor skobaljic

Vous devez vous connecter pour publier un commentaire.