Проверьте, установлен ли предок элемента.

У меня есть сайт с фиксированной навигационной панелью, и я хочу использовать Zurb Joyride для прикрепления советов к элементам на навигационной панели. Проблема в том, что при прокрутке страницы навигационная панель остается, но всплывающие подсказки не работают.Проверьте, установлен ли предок элемента.

Я попытался подключить всплывающие подсказки к элементам на навигационной панели (вместо body), но у меня возникли странные проблемы с рендерингом. Установка position: fixed на div, содержащая подсказку, кажется, работает, но мне интересно, есть ли простой способ программно определить, нет ли элемента в прокрутке, из-за того, что он содержится в контейнере с фиксированной позицией, так что я может определить, когда нужно также установить советы Joyride. Какие-либо предложения?

источник

2013-07-03 acjay

Вы можете использовать jQuery для этого. Допустим, что ваш предковый элемент, который является контейнером с фиксированной позицией, имеет класс «предок» для простоты. Позволяет также сказать, что ваши потомки (советы Joyride) имеют класс «потомок». Оба эти предположения должны быть тем, что вы можете легко добавить в свой HTML, или, альтернативно, использовать существующий класс как другой селектор jQuery. Затем вы можете сделать что-то подобное, чтобы сделать свое обнаружение.

if ($(".descendant").closest(".ancestor").css("position") == "fixed") { 
    // set your Joyride tip to fixed 
}

Обновлено

Поскольку вы дали немного больше отдаляется от того, что вы хотите сделать, я думаю, что вопрос что-то вроде «Как я могу проверить, если предок имеет фиксированное положение и там не является ближайшим предком, который прокручивает? ». Добавляя к этому, существует требование, чтобы ни один из предков не имел классов или идентификаторов. Я собираюсь предположить, что ваш Joyride останавливается, у всех есть класс «joyride-stop» исключительно для этого примера. Таким образом, чтобы определить, следует ли применять фиксированное положение для вашей Joyride остановки или нет, вам просто нужно будет сделать следующее (используя JQuery, так как zurb авантюры есть это как зависимость):

var jStops = $(".joyride-stop"); 

for (var i=0; i<jStops.length; i++) { 
    var pEls = jStops[i].parents(); 
    for (var j=0; j<pEls.length; j++) { 
     if(pEls[j].css("position") == "fixed") { 
      // closest ancestor is fixed. 
      // insert code to fix your Joyride element here 
      break; 
     } else if (pEls[j].css("overflow") == "scroll") { 
      // closest ancestor scrolls so just break and move on 
      break; 
     } 
    } 
}

Обратите внимание, что у меня есть только Здесь вы можете проверить здесь overflow css. Если вы хотите получить фантазию, вы можете проверить переполнение-x, переполнение-y и потенциально любой другой атрибут, который может влиять на наличие прокрутки (например, какой-либо другой пользовательский виджет JavaScript). Проверка зависит от того, что вам нужно беспокоиться на вашей странице на самом деле,

Это вы, что искали?

источник

2013-07-03 00:31:06 dcarson

Проблема в том, что наконечник может быть прикреплен к любому элементу. Но любой предок этого элемента может оказаться «позицией: fixed». Я думаю, что это будет плохой SoC, чтобы добавить класс стиля к каждому элементу, у которого есть подсказка. Я предпочел бы убедиться, что наконечник остается фиксированным, если его элемент остается фиксированным, не снимая разметки. – acjay

Я просто использовал классный подход в качестве примера вместо того факта, что вы не предоставили код для поддержки вашего вопроса. Если было ясно, как были применены советы, я мог бы дать более релевантный ответ. Учитывая, что подсказки знают, к какому элементу они применяются, я уверен, что вы также можете получить доступ к этой информации. Затем вы можете применить описанный выше подход. Наконец, применение классов по всей вашей отметке является очень распространенным подходом, это едва ли загрязнение, так как этот атрибут предназначен для – dcarson

. Достаточно справедливо, но если я добавлю классы вручную, чтобы сделать эту работу, я мог бы просто просто проработать ' позиция: фиксированная' в разметке. Joyride является вспомогательным для разметки контента, и преимущество моего решения status quo заключается в том, что его изменения, по крайней мере, ограничены разметкой Joyride. Я все же должен вручную поддерживать, какие элементы исправлены, а не обнаруживать их, но ваше решение также имеет этот недостаток. – acjay

До сих пор лучшим решением, которое я получил, является ручной класс li советов со стилем, который имеет position: fixed.

Обратите внимание, что это происходит со мной, что элемент с position: fixed предком еще может прокручивать, если ближе предок прокрутки контента, так что, вероятно, нет вообще статического метода не решить мою проблему путем обнаружения одного position: fixed предка. Я думаю, что идеальным решением было бы динамическое обновление местоположения наконечника при прокрутке, чтобы убедиться, что он остается неподвижным относительно его целевого элемента.

источник

2013-07-03 11:06:49 acjay

Вот способ с помощью JQuery:

var ancestorFixed = false; 
$element.parents().each(function() { 
    ancestorFixed = ancestorFixed || ($(this).css('position') == 'fixed'); 
});

источник

2015-11-13 21:26:45 Charlie

Вот чистый JavaScript подход. Он выполняет итерацию по всем офсетным родителям до тех пор, пока не найдет фиксированный (или вообще ничего).

function isFixed(elem){ 
    do{ 
     if(getComputedStyle(elem).position == 'fixed') return true; 
    }while(elem = elem.offsetParent); 
    return false; 
}

Если вы используете JQuery, вам нужно извлечь объект узла с помощью elem[0] или elem.get(0).

источник

2016-09-11 17:11:32

Проверьте, установлен ли предок элемента.

ответ

Смежные вопросы