Вставьте Div вверху страницы, сдвинув все вниз после вставленного Div - PullRequest
Новая
       9

Вставьте Div вверху страницы, сдвинув все вниз после вставленного Div

0 голосов
/ 03 октября 2018

У меня есть пользовательский скрипт, который добавляет в Google панель навигации, аналогичную той, что была у них несколько лет назад.
Теперь, как у меня настроен скрипт, мне приходится жестко кодировать код CSS для каждого сайта, который ему соответствует.для того, чтобы мой бар находился вверху страницы и сдвинул все вниз.

else if (/google.{2,6}forms/.test(vCurrentWebpage) == true ||
    /google.{2,6}slides/.test(vCurrentWebpage) == true ||
    /google.{2,6}sheets/.test(vCurrentWebpage) == true ||
    /google.{2,6}docs/.test(vCurrentWebpage) == true ||
    /google.{2,6}services/.test(vCurrentWebpage) == true ||
    /google.{2,6}cloudprint/.test(vCurrentWebpage) == true
) {
    GM_addStyle(`
    body{position:relative!important;
         top:29px!important;}
    .header,.stickyMobileHeader .mobileSearchWrapper,.mobileNavHeader{top:29px!important;}

    #GoogleBar{position:fixed!important;}
    `);

Этот метод работает для большинства сайтов, но для сайтов с фиксированным элементом внизу, нижний элемент обрезается :

With my bar the bottom element gets cut off

Но, нижний элемент должен быть полностью видимым :

good bottom

IsЕсть ли более надежный способ вставить элемент в верхней части страницы?

Я искал и искал, но я не могу понять это сам.

Вот ссылка на мой полный код

1 Ответ

0 голосов
/ 03 октября 2018

  • Короткий ответ: вы не можете (элегантно)

  • Длинный ответ: вы все еще не можете, потому что Google вычисляет высоту элементовоснованный на визуальной высоте окна, а не относительных родителей, это означает, что не имеет значения техника, которую вы не можете повлиять на вычисление, которое вставляется как встроенный стиль на страницу.но у вас все еще есть другие приемы UX, чтобы сделать это, как кнопка, которая открывает ваше меню и на мгновение перекрывает настоящее меню.

но ...

вы можетевоздействуйте на элемент, который контролирует высоту, с помощью хакерской js 

// for google spreadsheets go to the console and try
var grid = $('.grid-table-container + .grid-table-container')
grid.style.height = parseInt(grid.style.height, 10) - 30 + 'px'

, которая даст вам достаточно места, чтобы положить что-то наверх и помнить transform: translateY(##) тело вместо существующей top опоры

...