JQuery проверка текущего Div в браузере

Question

JQuery проверка текущего Div в браузере

0

Предположим, у меня очень длинная страница, состоящая из 10 разделов: -

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
<div id="5"></div>
<div id="6"></div>
<div id="7"></div>
<div id="8"></div>
<div id="9"></div>
<div id="10"></div>

могу ли я использовать jquery для проверки текущего div, который я просматриваю в пределах высоты браузера 900px?

user2122657 18 фев. 2014, в 12:19

Источник

1

Да. Проверьте, чтобы offet().top был> 0, а offset().bottom + el.height() - < window.height при scroll окна.
Rory McCrossan 18 фев. 2014, в 10:21
0

не могли бы вы привести простой пример? Большое спасибо!
user2122657 18 фев. 2014, в 10:22
1

простой ответ, ДА вы можете использовать. чтобы получить сложный ответ, покажите нам, что вы пытались в fiddle.net или jsbin.com
Ravimallya 18 фев. 2014, в 10:22
0

Привет, вы можете попробовать эффект наведения мыши, чтобы найти текущий div. но это не будет работать, если мышь находится вне браузера.
Viswanath Polaki 18 фев. 2014, в 10:23
0

это зависит от ваших требований, то есть, как вы хотите проверить с помощью id , определенного содержимого или index . Пожалуйста, дайте ваши разъяснения по этому вопросу.
Rohit416 18 фев. 2014, в 10:26
0

Проверьте Bootstrap - Affix
Tomanow 18 фев. 2014, в 10:29

Показать ещё 4 комментария

Теги:

jquery

html

1 ответ

Ещё вопросы

Да. Проверьте, чтобы offet().top был> 0, а offset().bottom + el.height() - < window.height при scroll окна.
не могли бы вы привести простой пример? Большое спасибо!
простой ответ, ДА вы можете использовать. чтобы получить сложный ответ, покажите нам, что вы пытались в fiddle.net или jsbin.com
Привет, вы можете попробовать эффект наведения мыши, чтобы найти текущий div. но это не будет работать, если мышь находится вне браузера.
это зависит от ваших требований, то есть, как вы хотите проверить с помощью id , определенного содержимого или index . Пожалуйста, дайте ваши разъяснения по этому вопросу.

Tiberiu C. · Answer 1 · 2014-02-18T10-00-00.000Z

Вы можете измерить смещение от вершины каждого div, и тот, который имеет положительное значение, в данный момент находится в вашем окне просмотра. Чтобы сгладить вещи немного, вы можете добавить к вычислениям половину высоты div. см. ниже код или проверьте этот jsbin: http://jsbin.com/gahoc/1/edit.

Для получения дополнительной информации предоставьте свой полный html (и всегда помните, что идентификаторы не должны начинаться с числа).

HTML:

 <div class="container">
    <div id="c1"></div>
    <div id="c2"></div>
    <div id="c3"></div>
    <div id="c4"></div>
    <div id="c5"></div>
    <div id="c6"></div>
    <div id="c7"></div>
    <div id="c8"></div>
    <div id="c9"></div>
    <div id="c10"></div>
  </div>

CSS:

.container {
  width : 100%;
  height: 900px;
  overflow-y: scroll;
}

.container > div {
  border: 1px solid black;
  margin : 3px auto;
  width : 90%;
  height : 600px;
}

JavaScript:

var $currentElement = null;

var highlightViewportElement =  function(){

  // reset previous element border
  if ($currentElement){
    $currentElement.css('border', '1px solid black');
  }
  // Iterate trough all the contained divs for their offset on top
  $('.container > div').each(function(){
    var $element = $(this);

    if (($element.offset().top + $element.height()/2)  >= 0){
      $currentElement = $element;
      return false;
    }
  });

  // Demo
  // a styling feedback
  $currentElement.css('border', '1px solid red');
  // outputing active element id
  $('#output').text($currentElement.attr('id'));
};
// Executing for the first time without the help of the scroll or touchmove event
highlightViewportElement();

$('.container').on('touchmove scroll',highlightViewportElement);