#7 ActiveBox - Верстка сайта с нуля для начинающих | jQuery

В этом видео поработаем jQuery и сделаем фиксированную шапку при прокрутке сайта, когда скролл страницы достигнет необходимую нам позицию.
// Ссылки =================
Основы HTML и CSS для начинающих: brainscloud.ru...
Материалы урока: files.brainscl...
Профессиональная, быстрая и комфортная верстка сайтов: frontend.brain... (Купон youtube -1000руб.)
// О проекте =================
Меня зовут Дмитрий Валак. Я занимаюсь разработкой сайтов уже много лет, специализируюсь больше на front-end разработке и верстке сайтов, но и программирование тоже изучаю. Здесь буду делиться с вами информацией на разные темы по веб-разработке - HTML, CSS, Javascript, JQuery, Vue, PHP, MySQL, React, Gulp и тд.
На сайте проекта brainscloud.ru вы найдете много полезных закрытых материалов, а так же сможете поработать со мной лично, при наличии такого желания.
// Соц. сети =================
Мой ВК - odimaz
Группа BC - brainsc...
Мой Instagram: / dmitryvalak
#верстка #версткасайта #созданиесайта #html #css

[@Ahmed__123j]

Лучшие уроки кокда либо видел Дмитрий Валак желаю успеха счастья во всем !

[@user-ot1rx5og8e]

Ребят, у кого появляются ошибки в js скрипте после подключение, либо дело в последовательности, либо в Brackets. У меня писало $ is not defined, всё перепробовал, все форумы пересмотрел, решил установить visual code и всё заработало.

[@hirdle2103]

@ksixenа он вообще не работает

[@ksupetrusenko]

Дорогой, Дмитрий! Ваши видео смотрю 100500 раз, уже делаю 10-й сайт. Мой муж программист, но когда он начинает мне что-то объяснять, меня начинает трясти, потому что я ничего не понимаю) Ваши уроки для меня находка. Оказывается все не так страшно) Желаю процветания во всех делах и знайте, Вы супер-человек )

[@BrainsCloud]

Ксения Петрусенко спасибо за добрые слова ) желаю успехов!

[@Aziiim]

Как успехи

[@user-gd8kn7by2r]

@@Aziiim у всех всё супер) продолжай!)

[@maga_frank]

Ксения как успехи? Надеюсь не бросили

[@johnny_bronxxx]

Я человек простой. Вижу бесценный обучающий курс - подписываюсь)

[@BrainsCloud]

Добро пожаловать!

[@user-kn3hp9qc6h]

сначала лайк ставлю, а потом видос смотрю. Спасибо за видосы!

[@user-hl4xr6zm6l]

Позывной 903 ставьте лайки после просмотра видео, иначе ютуб скрутит лайк, посчитав что это накрутка

[@Mykhailo_Vdovychenko]

@@user-hl4xr6zm6l верное замечание, но поидее если вначале просмотра ставишь лайк и просматриваешь видео, то не будет накрутки, ютуб зачтет как норм.

[@zaurelmanovich]

такая же фигня )

[@user-yj2oq7ki6l]

хороший урок! теперь ждем уроки по JQuery и Js )

[@donvanetti4270]

За год ни одного дизлайка, впервые такое вижу! Контент действительно качественный, спасибо!

[@arcticsnow4847]

сглазил

[@yevheniidodiak3644]

Подписаны все кто уверены в Вас и на Вас надеяться ☝️ спасибо за время, и практическое понимание чуточку JQuery✅

[@ulugbekkorakhanov547]

Идеальный урок, все разжевано, все ясно и понятно. Никаких вопросов даже нет. Спасибо огромное за труд.

[@ko-games7768]

Самые лучшие уроки по вёрстки во всём KZbin. По больше бы ещё уроков по Jquery.

[@ruslan36ya1]

Для тех у кого событие "load" тоже не работает, автор в следующем видео разбирает эту проблему.

[@w1kens]

Спасибо, добрый человек)

[@shubor1091]

Надо продвигать сей канал! Побольше комментов господа.

[@user-jw4wt7md5h]

Смотрю тебя в 2021 году и просто в ШОКЕ, на сколько ты круто рассказываешь. Хотя когда начал писать код на ДЖ, вообще ничего не понятно было(саму логику написания кода, т.к. знакомства и с синтаксисом языка у меня не было). Спасибо тебе большое.

[@agraiskr]

2021 . декабрь - я здесь научился большему чем на очных курсах по месту. Благодарствую!!

[@user-or1hy4xz8u]

@@agraiskr уже работаешь?

[@maga_frank]

Незнаю jQuery но знаю js, и я продолжаю делать на нём. И это круто)

[@user-om3hl9ik6r]

Заметил, что при перезагрузке страницы шапка все равно появлялась только после прокрутки. Исправил это, добавив следующий код перед событием: scrollPos=$(window).scrollTop(); introH = intro.innerHeight(); if(scrollPos>introH){ header.addClass("fixed"); } else { header.removeClass("fixed"); } P.s. спасибо за видео!

[@minutes210]

Спасибо дружище, без этого не работало

[@sigvist6228]

там проблема в самом методе load. Он почему-то срабатывает через раз или вообще может не срабатывать 5 раз подряд. Я пока что не понимаю поведения этого события load. Ведь по идее он должен срабатывать каждый раз как ты перезагружаешь страницу, а у него будто бы сбой в системе случается. Возможно это баг

[@user-or1hy4xz8u]

@@sigvist6228 ну что, разобрался с load ?

[@alexeymaranin5755]

Я дошел до этого урока и просто в восторге от этого курса! я скину его всем друзьям кто хочет начать верстать, настолько все ясно и понятно, чистейший код

[@romanro8630]

Большое спасибо! Очень круто всё! Дизы ставят завистники))

[@antonlashuk2764]

Спасибо, лучший канал на ютубе! Ждем ещё больше контента!

[@Anastasia-oe1sw]

Здравствуйте! Спасибо Вам огромное за Ваши уроки!!! Прекрасное обьяснение, очень доступно и понятно! Ну и голос приятный, что немаловажно))))

[@EUC_Novak]

🌟🌟🌟🌟🌟 *Спасибо за очень полезный и понятный урок!!!* 🌟🌟🌟🌟🌟

[@user-bo2fn9ye6b]

Отличный ролик. Наконец JS.

[@sergstrue362]

лайк!!!! без тени сомнения!

[@user-lz9ij3vq1t]

Все очень понравилось! Спасибо! Особенно понравился подход к работе с классами: отдельно для css, отдельно для js.

[@user-nl4kv7xd3r]

И на этом уроке начали кипеть мои мозги!))))) А так курс бомба!

[@yuliyapakidzka630]

Спасибо большое за такой подробный , понятный материал!

[@tai_sawfly791]

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

[@Spectrum.Luxury]

Этот урок был для меня мало понятным так как я незнаком с js но тем не менее я понял как это все работает, очень хорошо изложено, как всегда на высоте. От меня 540-й лайк зашел против 0 дизлайков. Не каждый может похвастаться таким результатом! Продолжай снимать!

[@georgybakharev4645]

Впервые имею дело с jquery и вообще с JS. Тяжелова-то воспринимать синтаксис. Как бы всё понятно разжевано, понятно что делает каждая строка кода, но сомневаюсь, что смог бы такое сделать, просто прочитав книжку, пусть и хорошую, типа Выразительный JavaScript. В общем спасибо за науку. Приятно видеть человека, который выкладывается на 100%.

[@user-eb3yr9wc4k]

Благодарю тебя за то что ты делаешь!!!

[@user-ki1ej9gg6t]

0 дизлайков. Профессионализм,ничего лишнего.

[@vovave88]

спасибо что объясняете очень доступно. до сегодняшнего дня я ничего не знал о jquery. в итоге какое-то понимание как это работает уже есть)

[@lonelytalent4298]

Спасибо большое! Познавательно и без лишних слов. А то на ютубе как начнут из пустого в порожнее))

[@kostyalopuh955]

так и чешется рука поставить этот дизлайк..но нет,была бы возможность,поставил бы 100500 лайков)не хочу портить такую красоту - рай для перфекциониста)

[@lemonchik3905]

Есть ещё один косяк с шапкой. Если повторно перезагрузить страницу, то шапка сразу появляться не будет. А так очень годно!

[@user-tl2lz1wv3p]

У меня такая же проблема. Когда обновляешь ниже intro, появляется, скролишь вверх не исчезает(

[@yardcsgo2428]

Ты лучший, самый лучший ютубер

[@BrainsCloud]

хе, спасибо )

[@tanyamarushka7251]

Огромное спасибо!

[@user-bz6lb8kl8n]

Очень интересно! Большое спасибо!

[@user-qu1ph2xm3b]

Огромное спасибо за помощь!

[@user-rp9po1ev5r]

Все ок, нашла сама как подключить файл js, проблема в этом была)

[@user-zd3hb1ej7u]

Первый раз вижу чтобы за 15 к просмотров не было ни одного диза:)

[@SatUluBah]

Просто Лайк и Коммент в придачу)))

[@mak_whisk]

Спасибо большое!

[@aleksandrsrudkevics6384]

Супер. Спасибо за урок!

[@domovikx_by]

Одно НО. вместо let желательно указывать const. Есть правило: вначале везде использовать const и только при необходимости писать let. В итоге код можно привести примерно к такому виду: $(() => { const header = $('#header') const intro = $('#intro') /** header--fixed */ $(window).on('scroll load resize', () => { const introH = intro.innerHeight() const scrollTop = $(window).scrollTop() if (scrollTop > introH) { header.addClass('header--fixed') } else { header.removeClass('header--fixed') } }) })

[@alangart8443]

А не знаешь из за чего jquery выдает ошибку srollTop is not a function? как раз из за let? ибо код 1 в 1 как в видео:(

[@user-ig5en5eh7d]

Все круто! Идем дальше)

[@Lets_Play_Chess]

Дякую , за корисні уроки) Все зрозуміло пояснюєш.

[@followmagnus9775]

*Cпасибо за урок. Буду дальше изучать JS что бы лучше понимать логику кода*

[@ichelsea]

Спасибо большое за обучающие ролики)

[@user-te1ut5ev8w]

Здравствуйте! Благодарю за видео!

[@andreystepanov982]

Большое спасибо за урок, все очень грамотно, максимально детально, прям лучше не придумаешь... Это однозначно лучший для меня канал по верстке, именно такой стиль работы для меня пример, который я буду учиться применять! Скажите пожалуйста будут ли у Вас уроки по JS???

[@BrainsCloud]

Возможно, время покажет

[@vladubiriya8497]

Спасибо за урок!!!

[@regi_volf3631]

продолжайте буду смотреть с первой части и делать сайт

[@user-lf4on8ef6p]

Всем привет подскажите на ошибку. В теги head поместил тег script src=" " положил ссылку а потом в конце написал путь к папке app.js через тот же script src=" " всё сохранил и перехожу в app.js пишу $(function() { console.log("rabotaet"); }); сохраняю и появляется ошибки подскажите что не так, если это мало информации напишу в личка. Буди благодарен за помощь.

[@BKLG]

Привет, решил проблему?

[@artem_ka3863]

Спасибо за годный контент!!!

[@_Fantom_.]

Отличный урок! Странно что не был подписан, хорошо напомнил, исправляюсь! )

[@serene3d772]

спасибо за отличные уроки!

[@walterlexxx]

527 лайків 0 дизлайків - це показник якості і потрібності відео. Дякую!

[@user-ef7zi5qy6v]

Не ожидал два видео сразу)

[@KanalReal]

спасибо!

[@user-cg6qk3vi7n]

Конечно подписался. На такой годный контент не подписатся невозможно.

[@kirillkononov5094]

Добрый день! Спасибо за подробный урок. Посмотрел до донца и сейчас буду еще раз просматривать и повторять. Но, не избавился от вопроса: в CSS есть Position: fixed. Почему использовали JQuery а не решили эту задачу при помощи CSS? еще пожелание: у Вас получается очень хорошо объяснять, может быть вы к ActiveBox доделаете еще несколько уроков - "как "натянуть" на CMS"? WP или October (Ваш BrainsCloud.ru ведь на October CMS.

[@user-nk6cu4uj3t]

Спасибо!

[@ladyafize5689]

Спасибо!!!

[@aisultanzhaksytayev9002]

Этот коментарий создан в качестве уважения автору и для продвижения его канала.

[@user-tm7ts4gv9d]

То что уже некоторые моменты апдейтнулись, это 100%.У меня без прописи load, шапка не исчезала при обновлении страницы ни в одном из 4-х браузеров.

[@user-nv1cs5vd3j]

Крутотааа!

[@hotDelights_]

Thank you for the lesson) 🔥

[@slava_po]

Браво!

[@Yakyzzza93]

не, ну смотреть этот канал и не подписаться... это не комильфо, товарищи!=)

[@netmoemail]

Чувак ты крут!

[@ivanovivan3681]

Чтобы команда load работала в firefox, нужно переписать код так - $(window).bind("scroll load", function(). Заменить on на bind. В хроме новый код также рабоает)

[@dsim2632]

Смотрю твое видео, 22:00 минута и у меня только один вопрос - Да откуда он все это знает, что и когда нужно применить ? Есть видос где ты рассказываешь свою историю, с чего начал, где и как учил, сколько ушло времени. Мне было интересно узнать.

[@BrainsCloud]

Такого видео нет

[@dsim2632]

@@BrainsCloud Может как то время стримчика расскажешь ? Думаю всем интересно будет.

[@BrainsCloud]

@@dsim2632 Если такой вопрос будет, то да

[@dsim2632]

@@BrainsCloud А когда следующий стрим ? Я задам )

[@BrainsCloud]

@@dsim2632 еще не знаю, может в пятницу

[@kpn9536]

Помогите Что делать, если при написании конструкции $(function() { }) ; Выскакивают ошибки 1. '$' was used before it was defined. 2. Expected exactly one space between 'function' and '('. 3. Missing 'use strict' statement.

[@user-ry2on6rr5h]

разобрался ?

[@dmitrycathari3607]

такой же фейл. в чем проблема?

[@bloodywulf626]

Та же ошибка, разобрался кто?

[@egoraizer2792]

@@bloodywulf626 Да, необходимо было сохранить HTML файл

[@PierreDunnio]

Сохранение не решило проблему. Кто-то может помочь?

[@denvudd4492]

Подскажите почему при скролле там где фото на весь экран(блок works) и когда доходит до фото с блока reviews хэдер опять пропадает и появляется после того как проскролил эти участки?

[@romadzzzn]

хорошие уроки.(лайк)

[@elitech3339]

охренеть какой урок прикольный

[@eeddeellwweeiiss]

Ты крут!

[@user-sp8kt5tu3l]

Я подписался!)))

[@DerAleksey]

а вот теперь появился вопрос, а как и возможно ли сделать без библиотеки jQuery?

[@user-ox5qe7vl7j]

Ребята, помогите! Выдает ошибку $ was used before it was defined, какрешить, сохранение и подключение к новым библиотекам не помогает

[@Nalesc]

забей на ошибки, в браузере все равно работает

[@POLUKOROB]

не одного дизлайка....ты что , бог ?

[@inkidgd5988]

Здраствуйте, Дмитрий! Очень качественные и полезные уроки, спасибо! Есть вопрос, как называется плагин, который вам даёт подсказки для javascript? А то я скачал JavaScript Completions, но он даёт много бесполезных подсказок, и скорее мешает, чем помогает.

[@BrainsCloud]

Для js я ничего не ставил кроме brackets-eslint

[@inkidgd5988]

@@BrainsCloud Понял, спасибо!

[@kabelardoditensio7802]

код пишу в app.js на в первых 2х строчках 9 ошибок и ничего не работает( Видимо версии уже другие jquery и нужно по другому как то писать код(

[@tahirgarayev6224]

почему то Файрфокс не воспринимает load после scroll и не показывает ленту навигации

[@megafyrnd]

Дмитрий, в предыдущих видео ты сказал, что мы будем скролить шапку. Я тогда решил сразу попробовать, и сделал это через css, единственное в чем я тогда не разобрался, как background тоже тянуть за собой. Вопрос. Ты показываешь это в js просто чтобы показать, как работать в js? Или это оптимизация ненужных телодвижений в css? Т.е. можно ли сделать это в css физически и если да не будет ли это считаться детским лепетом тратой времени в глазах опытных фронт энд разработчиков?

[@johnny_bronxxx]

почему у меня без события load меню не исчезает ни в одной точке страницы при обновлении?

[@user-su4sj5um3d]

Поставил 748-ой лайк. Еще нет ни одного дизлайка!

[@dim3143]

А почему в CCS создаются селекторы .header .fixed{ position: fixed; } Не правильнее было бы их напрямую из JSa присваивать элементам?

[@osintervalproject5636]

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

[@dim3143]

Если сначала загрузится скрпит, то на строчке header.addClass("fixed"); возникнет ошибка, т.к. элемента header еще физически не существует и присваивать класс пока что нечему. И только после прогрузки всех элементов можно будет выполнять с ними какие-то манипуляции.

[@user-rt4pn7xt4e]

6:48 И тут мне Brackets выдал много ошибок и в браузере (console) не было надписи ... Вывод: в отличии от *css и *html , перед просмотром *js надо сохранять и тогда brackets не будет выводить ошибок и в console будет отображаться корректно )

[@user-nm3pw6dw3g]

спс чувак, спас ) я то думал хули не так у меня:/

[@itsmine5288]

Не работает

[@user-rt4pn7xt4e]

Егор Никитин возможно ошибка у тебя в коде, ищи, сверяй, проверяй и да прибудет с тобой сила 💪

[@itsmine5288]

@@user-rt4pn7xt4e главное высоту 750 не пишет написано undefined ,а scroll 0 выдает

[@itsmine5288]

@@user-rt4pn7xt4e вы продолжаете заниматься?

[@user-mi2pv9ld8p]

Дмитрий, здравствуйте! Вопрос: При перезагрузке страницы без последующего скролла (значение 0) шапка видоизменяется. Далее при любом скролле (меньше 750 px ) выполняется скрипт и js возвращает шапку в первоначальный вид. Подскажите пожалуйста, как в условии исключить выполнение скрипта в значении 0 ( при первоначальной загрузке страницы) . Надеюсь изложил понятно! Курс замечательный!

[@beldack5363]

Jquery не актуален? У меня почему - то ошибку 407 и ERR_FILE_NOT_FOUND выдаёт.

[@user-dc5zk1vn7m]

Почему то у меня после добавления события "load" ничего не пожелало меняться ((. И местами менял, и кавычки другие ставил, даже отдельно блок копировал. Так и не разобрался в итоге))

[@darklight7167]

У меня вообще через раз работает, то есть раз перезагрузил - вышло, второй раз перезагрузил - нет, потом раз на 5 опять выходит...

[@user-ms8qx5fu8b]

Возможно нужно писать add class а toggleClass

[@helios8567]

А если без переменной? if(scrollPos > $('#header').innerHeight()) В таком случае отпадают ошибки из за перезаписывания переменных.

[@nenuasho905]

Как сделать плавное отображение шапки при скролле? И можно ли вообще так сделать?

[@ivankonoval5768]

Здравствуйте, помогите пожалуйста, у меня возникла проблема при работе с файлом JS, подключил как на видео но увы постоянно выдает ошибки такие как "error parsing error: Unexpected token header" и прочие и при попытке вывести то-же инфо в консоль ничего не происходит. Скажите пожалуйста, что я могу сделать?

[@AntonBoroda762]

Круто 👍🏽. Но ничего не понятно 🙈

[@karinalukyanenco2147]

А что можно сделать если не подключается библиотека? Выдает такую ошибку-Аналізатор ESLint завершився з помилкою: timeout Спасибо за Ваши уроки!

[@itsmine5288]

Нашел проблему?

[@exerdverser1616]

Все сделал как у вас, но почему-то команда load просто игнорируется и при перезагрузке страницы шапка не появляется, пока не начнешь скролить. В чем может быть проблема? Причем в гугл хроме такого нет, а вот в опере почему-то так

[@Max-ye9lg]

у меня тоже самое в хроме

[@TiMa_156Y]

Почему-то в мобильном chrome не работает фиксация меню, на компе все нормально. С чем может быть это связано?