Ответ на пост «Школьное»⁠⁠12

Мне выражение "не работает, переделай" сообщил компьютер. На одном и том же коде!!!

Скачал из интернета шаблон HTML+CSS+JS, внес правки и во время тестов вижу, что отваливается шапка страницы. Но я слишком много правок внес и не знаю, какая из них ломающая. Мало ли, где-то зависимость от класса следующего блока или от фазы Луны.

Решил вносить частями, чтобы определить где и что именно ломается, т.к. визуально неработающие и работающие места -- идентичны! Мало ли как в Python пробелы и табуляция из-за копипаста перемешаются, а скрипт не работает. Выглядят то идентично! Если не включать отображение подобных символов как-то иначе.

Беру исходный шаблон, копирую рядом и... Шаблон перестает работать!

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

В итоге, на HTML+CSS написал простенькую консоль внутри блока типа:

<p>Переменная А = <i id="idA"></i><p>

UPD: Копипаст наше все отсюда:

После заголовка: Pure-CSS lightbox

https://developer.mozilla.org/ru/docs/Web/CSS/:target

(с помощью CSS зафиксирован всегда сверху, всегда по центру, фон полупрозрачный, добавил z-index)

В JS добавил обновление переменных внутрь подозрительной функции:

var el = document.getElementById('idA');

el.textContent = A;

соблюдая все регистры символов, ибо знаю, что разные языки по разному относятся к регистрам, где-то кладут болт на регистр, все работает, а где-то требуют точное соблюдение регистра.

Открываю оба документа -- из исходного каталога и из скопированного. И произвожу манипуляции:

баг с пропаданием шапки страницы работает только когда страница загружена с шириной больше 992px, потом немного прокручиваю вниз до исчезновения шапки (она становится закрепленной сверху), после чего уменьшаю ширину браузера. При прокрутке в начало шапка остается со свойством "display:none" и не видна.

Но почему в оригинальной странице работает все нормально, а в копии этой же страницы -- нет? КОПИЯ!!! Т.е. вся разница -- это только другое название папки.

С помощью jQuery реализована нужная функция в шаблоне (не моя):

windows.on('scroll', function () {

var scroll = windows.scrollTop();

var headerHeight = header.height();

if (screenSize >= 992) {

if (scroll < headerHeight) {

header.removeClass('display-none');

} else {

header.addClass('display-none');

Перед этим и после есть код. Включая закрывающие скобки.

Оказалось -- headerHeight во второй вкладке умудряется обнулиться! Т.е. я загрузил первую оригинальную страницу, она все нормально отработала. Вторая страница из копии -- после сокрытия каким-то образом умудряется сбросить высоту элемента в ноль. Т.е. он в тот момент был скрыт и его размер реально нулевой, только вот предыдущее состояние, почему-то, не сохранено.

Соответственно, если загрузить в третьей вкладке оригинальную страницу, то и на ней баг стал воспроизводиться!

Обнаружив баг с неверной высотой элемента стал думать как порешать и тот. Чтобы правильно запоминалась высота элемента. Но потом -- а не пофиг ли? В самом верху значение scroll будет равно нулю. Значит, нужно либо второй элемент увеличить на единицу, если он занулится, либо поменять оператор сравнения < на <=

Т.е. будет:

if (scroll <= headerHeight+1)

(применил оба исправления, хуже не будет, я на это надеюсь, от JS всего можно ожидать)

Кучу времени убил на то, чтобы узнать, что нужно было добавить или знак равенства, или поставить +1.

Хуже только узнать, что Python-скрипт не работает потому, что где-то отступы отформатированы пробелами, а где-то -- табами. Например, при копипасте, в котором пробелы, когда сам используешь табы...

Пробел -- это "ноль", таб -- это "единица", вот тебе машинный код, иди ищи баги..

P.S. я JS не знаю... Просто думаю такой: ну, вроде, он похож на язык программирования, который я знаю...