Скрывать заголовки веб-страниц, которые остаются "застрявшими" сверху при прокрутке

Question

Долгое время меня беспокоили заголовки, которые остаются "застрявшими" в верхней части страницы. Вот последний пример, с которым я столкнулся:

Сайт перед прокруткой:

Сайт после прокрутки немного вниз:

(сайт здесь)

Обратите внимание, как заголовок блокирует часть текста, эффективно уменьшая горизонтальный размер моего браузера.

Я использую Firefox, и я узнал, что я могу скрыть эти проблемные заголовки, используя элемент inspect и добавив встроенный CSS для такого элемента, как display: none . Хотя это лучше, чем ничего и работает, когда я действительно хочу прочитать статью, очень раздражает необходимость делать это каждый раз, когда я посещаю веб-сайт. Мне также известно, что я могу использовать Таблицу стилей пользователя для создания постоянного правила, чтобы скрыть элемент для определенного веб-сайта, но я также хотел бы избежать этого, так как это отнимает много времени.

Короче говоря, мой вопрос таков: есть ли способ автоматизировать скрытие элемента с помощью скрипта или написать таблицу стилей пользователя для последовательного скрытия таких заголовков?

Answer 1

Фиксированные (без прокрутки) заголовки становятся менее популярными с января 2016 года, но если кто-то все еще хочет манипулировать фиксированными элементами программно, их легко получить с помощью простого JavaScript:

// get Array of all body elements that contain css rule position: fixed
var fixed_elements = Array.prototype.filter.call(
  document.querySelectorAll('body *'),
  function (e) {
    return window.getComputedStyle(e).getPropertyValue('position') === 'fixed'
  }
)

Например, я опубликовал свой Scroll Away UserScript на GitHub, который меняет стиль на position:absolute (элементы остаются видимыми, но они будут прокручиваться с остальной частью страницы):

• если у вас уже есть GreaseMonkey для Firefox или TaperMonkey для Chrome, вы можете использовать ссылку github raw для его установки
  _{PS: не забудьте отредактировать включенные / исключенные страницы по мере необходимости ...}

Answer 2

Самый простой способ удалить эти надоедливые фиксированные верхние и нижние колонтитулы - это использовать букмарклет (см. Википедию, если вы с ними не знакомы).

Создайте обычную закладку (например, перетащив значок слева от URL-адреса на панель инструментов закладок), а затем отредактируйте ее, добавив следующий код в качестве URL-адреса закладки:

javascript:(function(){var elems=document.body.getElementsByTagName("*");var len=elems.length;for(var i=0;i<len;i++){var pos=window.getComputedStyle(elems[i],null).getPropertyValue('position');if(pos=='fixed'||pos=='sticky'){var el=elems[i];el.parentNode.removeChild(el);}}})()

Теперь щелкнув эту специальную закладку, вы удалите все не прокручивающиеся элементы на странице. На рабочем столе Chrome вы можете показать / скрыть панель закладок с помощью Ctr+Shift+b (Linux / Windows) или Command+Shift+b (Mac).

Преимущество букмарклетов в том, что вам не нужно устанавливать никаких дополнительных плагинов или расширений.

Кроме того, букмарклеты также работают в большинстве мобильных браузеров, что означает, что вы можете использовать их для увеличения области чтения на вашем мобильном телефоне / планшете. В IOS букмарклеты работают в Safari и Chrome (Firefox в IOS в настоящее время не позволяет редактировать закладки).

На Android букмарклеты поддерживаются в Chrome, Firefox, Opera и большинстве современных стоковых браузеров. Самый быстрый способ запустить закладку - набрать ее имя в адресной строке, а затем нажать (на killFixed на скриншоте), когда она появится в выпадающем меню. По-видимому, это единственный способ запустить букмарклет в Firefox и Chrome для Android. Для Safari на iOS вам нужно коснуться значка закладок, а затем, когда список закладок отобразится во всплывающем окне, коснуться вашей закладки.

Обратите внимание, что иногда вам может понадобиться повторно щелкнуть букмарклет и указать порядок удаления всех элементов.

Answer 3

Вы можете использовать плагин, как Greasemonkey. Затем просто добавьте немного пользовательского JavaScript для редактирования CSS только для этого элемента на этом сайте. Это должно быть там снова при следующем посещении сайта.

Answer 4

Это улучшенная версия кода ccpizza. Исправлена ошибка, при которой удалялся только один элемент верхнего уровня вместо всех.

javascript:(function(){var%20found=true;while(found){var%20elems=document.body.getElementsByTagName("*");var%20len=elems.length;for(var%20i=0;i<len;i++){found=false;if(window.getComputedStyle(elems[i],null).getPropertyValue('position')=='fixed'){var%20el=elems[i];el.parentNode.removeChild(el);found=true;break;}}}})()

Answer 5

Я использую Element Hiding Helper для Adblock Plus, чтобы избавиться от описываемых вами элементов (которые, я думаю, называются «style: fixed»). В частности, когда я хочу избавиться от одного из них, я нажимаю на значок Adblock Plus на панели инструментов, выбираю "Скрыть элемент" (или что-то в этом роде - сейчас на этой машине нет Firefox), затем я должен использовать комбинацию мыши и некоторых клавиш (т. е. "w" для "расширенного выделения", "n" для "узкого выделения", "s" для «да, это элемент, от которого я хочу избавиться»), чтобы выбрать элемент, затем взаимодействуйте с диалоговым окном. Но как только я это сделаю, элемент будет отсутствовать каждый раз, когда я использую Firefox для посещения этого конкретного веб-сайта. Я сделал это для десятков сайтов, и он надежно скрывает элементы, которые я сказал, чтобы скрыть.

https://addons.mozilla.org/en-US/firefox/addon/elemhidehelper/

(Я бы предпочел надстройку, которая по умолчанию скрывает все элементы «style: fixed» и дает мне возможность указать, что я хочу, чтобы конкретный элемент «style: fixed» на определенном сайте отображался, а не скрывался, но Я не знаю ни одного.)

Answer 6

После нескольких месяцев работы с этой проблемой с помощью "проверяющего элемента" в Firefox или по-настоящему болезненного редактирования моих файлов Firefox userChrome/userContent я обнаружил, что решение « Stylish» легко является лучшим решением для этой проблемы. Это все еще не автоматизировано, но это намного быстрее чем что-либо еще, что я нашел, и это сохраняется при посещениях веб-сайтов.

Вот пример:

• Я только что посетил ссылку от Hacker News о зарплатах вымышленных телевизионных персонажей. Это выглядит интересно, но у него есть фиксированный заголовок. о нет!
• Я проверяю заголовок с помощью инспектора элементов Firefox и определяю, что проблемным классом здесь является navbar_fixed_top , который используется для исправления div заголовка.
• Я создаю очень простой стильный стиль, который решает мою проблему. Эта проблема теперь исправлена для всех будущих посещений этого домена.

Стильный стиль:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("salaryfairy.com") {
  .navbar-fixed-top { 
      position: absolute;
  }
}

И теперь заголовок остается в моем пути!

Как только у меня будет больше данных о типичных именах / идентификаторах классов для фиксированных заголовков, я рассмотрю создание независимого от домена стильного стиля, который по умолчанию делает эти классы / идентификаторы абсолютными.