как проверить, находится ли класс между 50 и 150 пикселями сверху, а затем выбрать атрибут ID классов

Question

как проверить, находится ли класс между 50 и 150 пикселями сверху, а затем выбрать атрибут ID классов

0

Я пытаюсь найти более чистый способ определить, находится ли класс в верхней части экрана, но в пределах определенного порога. Например, от 50 до 150 пикселей сверху.

я сделал что-то здесь, используя идентификатор для проверки, но он очень повторяющийся. возможно ли получить класс, работающий с этим вместо ID?

   $(window).on('scroll', function() {
     var scrollTop = $(window).scrollTop();
     var elementFromTop = $('#section_a').offset().top;          
     var distanceFromTop  = (elementFromTop - scrollTop);
     if (distanceFromTop > 0 && distanceFromTop < 100) {
       console.log("section_a in zone- highlight link in nav");
     }
   });

   $(window).on('scroll', function() {
     var scrollTop = $(window).scrollTop();
     var elementFromTop = $('#section_b').offset().top;          
     var distanceFromTop  = (elementFromTop - scrollTop);
     if (distanceFromTop > 0 && distanceFromTop < 100) {
       console.log("section_b in zone- highlight link in nav");
     }
   });

   <div class="section" id="section_a"> width is 100%</div>
   <div class="section" id="section_b"> width is 100%</div>

flash_guy 18 дек. 2013, в 20:18

Источник

0

Я, это возможно. Так что вы пробовали? Кстати, посмотрите на плагин waypoints, если вам нужно более надежное решение
A. Wolff 18 дек. 2013, в 18:54
0

кто-то предложил мне пройтись по всем классам. в конечном итоге ничего не сработало, потому что (я полагаю) бывают моменты, когда на странице появляются 2 класса одновременно. к сожалению, у меня больше нет такого теста кода.
flash_guy 18 дек. 2013, в 19:04
0

Я не эксперт, но это звучит маловероятно. Можете ли вы поставить JS скрипку? И чтобы быть уверенным, вы вызываете свой jquery из раздела готовых документов. Например, $ (function () {/ * codehere * /});
Martin Hansen Lennox 18 дек. 2013, в 19:08

Показать ещё 1 комментарий

Теги:

jquery

1 ответ

Ещё вопросы

Я, это возможно. Так что вы пробовали? Кстати, посмотрите на плагин waypoints, если вам нужно более надежное решение
кто-то предложил мне пройтись по всем классам. в конечном итоге ничего не сработало, потому что (я полагаю) бывают моменты, когда на странице появляются 2 класса одновременно. к сожалению, у меня больше нет такого теста кода.
Я не эксперт, но это звучит маловероятно. Можете ли вы поставить JS скрипку? И чтобы быть уверенным, вы вызываете свой jquery из раздела готовых документов. Например, $ (function () {/ * codehere * /});

Martin Hansen Lennox · Accepted Answer · 2013-12-18T16-42-00.000Z

Вы можете попробовать применить этот код, используя jquery.each().

Что-то вроде этого?

$('.myclass').each(function(){
     var id = $(this).attr('id');
     var scrollTop = $(window).scrollTop();
     var elementFromTop = $('#' + id ).offset().top;          
     var distanceFromTop  = (elementFromTop - scrollTop);
     if (distanceFromTop > 0 && distanceFromTop < 100) {
       console.log("id" + id + " in zone- highlight link in nav");
     }
});

Это применит ваш код к каждому элементу этого класса.

просто не забудьте заменить '#section_a' на это var elementFromTop = $ (this) .offset (). top;
Да, правильно, только что сделал это редактирование - спасибо
это сработало! большое спасибо. Я нашел недостаток в моей логике. если экран большой, иногда класс никогда не попадет в верхнюю часть страницы. Следующий шаг - выяснить, как проверить, находится ли он в середине страницы. там написано, что у меня недостаточно репутации, чтобы поддержать вас: /
ах, я думаю, что var elementFromTop = $ ('#' + id) .offset (). top - 300; if (distanceFromTop> 0 && distanceFromTop <500) {.... устраняет проблему с серединой страницы. тестирование дальше.
Здорово :) Кричите, если вы застряли, но мое время на компьютере в это время года довольно странное.