#7 ActiveBox - Верстка сайта с нуля для начинающих | jQuery
Вставка
- Опубліковано 5 чер 2019
- В этом видео поработаем jQuery и сделаем фиксированную шапку при прокрутке сайта, когда скролл страницы достигнет необходимую нам позицию.
// Ссылки =================
Основы HTML и CSS для начинающих: brainscloud.ru/landing/html-css
Материалы урока: files.brainscloud.ru/file/act...
Профессиональная, быстрая и комфортная верстка сайтов: frontend.brainscloud.ru/ (Купон youtube -1000руб.)
// О проекте =================
Меня зовут Дмитрий Валак. Я занимаюсь разработкой сайтов уже много лет, специализируюсь больше на front-end разработке и верстке сайтов, но и программирование тоже изучаю. Здесь буду делиться с вами информацией на разные темы по веб-разработке - HTML, CSS, Javascript, JQuery, Vue, PHP, MySQL, React, Gulp и тд.
На сайте проекта brainscloud.ru вы найдете много полезных закрытых материалов, а так же сможете поработать со мной лично, при наличии такого желания.
// Соц. сети =================
Мой ВК - odimaz
Группа BC - brainscloud
Мой Instagram: / dmitryvalak
#верстка #версткасайта #созданиесайта #html #css
Я человек простой. Вижу бесценный обучающий курс - подписываюсь)
Добро пожаловать!
Идеальный урок, все разжевано, все ясно и понятно. Никаких вопросов даже нет. Спасибо огромное за труд.
хороший урок! теперь ждем уроки по JQuery и Js )
За год ни одного дизлайка, впервые такое вижу! Контент действительно качественный, спасибо!
сглазил
сначала лайк ставлю, а потом видос смотрю. Спасибо за видосы!
Позывной 903 ставьте лайки после просмотра видео, иначе ютуб скрутит лайк, посчитав что это накрутка
@@user-hl4xr6zm6l верное замечание, но поидее если вначале просмотра ставишь лайк и просматриваешь видео, то не будет накрутки, ютуб зачтет как норм.
такая же фигня )
Самые лучшие уроки по вёрстки во всём UA-cam. По больше бы ещё уроков по Jquery.
Дорогой, Дмитрий! Ваши видео смотрю 100500 раз, уже делаю 10-й сайт. Мой муж программист, но когда он начинает мне что-то объяснять, меня начинает трясти, потому что я ничего не понимаю) Ваши уроки для меня находка. Оказывается все не так страшно) Желаю процветания во всех делах и знайте, Вы супер-человек )
Ксения Петрусенко спасибо за добрые слова ) желаю успехов!
Как успехи
@@Aziiim у всех всё супер) продолжай!)
Ксения как успехи? Надеюсь не бросили
Ребят, у кого появляются ошибки в js скрипте после подключение, либо дело в последовательности, либо в Brackets. У меня писало $ is not defined, всё перепробовал, все форумы пересмотрел, решил установить visual code и всё заработало.
@ksixenа он вообще не работает
Лучшие уроки кокда либо видел Дмитрий Валак желаю успеха счастья во всем !
Подписаны все кто уверены в Вас и на Вас надеяться ☝️ спасибо за время, и практическое понимание чуточку JQuery✅
Для тех у кого событие "load" тоже не работает, автор в следующем видео разбирает эту проблему.
Спасибо, добрый человек)
Я дошел до этого урока и просто в восторге от этого курса! я скину его всем друзьям кто хочет начать верстать, настолько все ясно и понятно, чистейший код
Спасибо большое за такой подробный , понятный материал!
Все круто! Идем дальше)
Благодарю тебя за то что ты делаешь!!!
Спасибо, лучший канал на ютубе! Ждем ещё больше контента!
🌟🌟🌟🌟🌟 *Спасибо за очень полезный и понятный урок!!!* 🌟🌟🌟🌟🌟
Все очень понравилось! Спасибо! Особенно понравился подход к работе с классами: отдельно для css, отдельно для js.
Супер. Спасибо за урок!
Очень интересно! Большое спасибо!
Спасибо большое! Познавательно и без лишних слов. А то на ютубе как начнут из пустого в порожнее))
Огромное спасибо за помощь!
спасибо что объясняете очень доступно. до сегодняшнего дня я ничего не знал о jquery. в итоге какое-то понимание как это работает уже есть)
Спасибо большое за обучающие ролики)
Надо продвигать сей канал! Побольше комментов господа.
Смотрю тебя в 2021 году и просто в ШОКЕ, на сколько ты круто рассказываешь. Хотя когда начал писать код на ДЖ, вообще ничего не понятно было(саму логику написания кода, т.к. знакомства и с синтаксисом языка у меня не было).
Спасибо тебе большое.
2021 . декабрь - я здесь научился большему чем на очных курсах по месту. Благодарствую!!
@@agraiskr уже работаешь?
продолжайте буду смотреть с первой части и делать сайт
Спасибо за урок!!!
Отличный ролик. Наконец JS.
Здравствуйте! Благодарю за видео!
Дякую , за корисні уроки)
Все зрозуміло пояснюєш.
Спасибо за годный контент!!!
Здравствуйте! Спасибо Вам огромное за Ваши уроки!!! Прекрасное обьяснение, очень доступно и понятно! Ну и голос приятный, что немаловажно))))
И на этом уроке начали кипеть мои мозги!))))) А так курс бомба!
Большое спасибо! Очень круто всё!
Дизы ставят завистники))
Просто Лайк и Коммент в придачу)))
Заметил, что при перезагрузке страницы шапка все равно появлялась только после прокрутки. Исправил это, добавив следующий код перед событием:
scrollPos=$(window).scrollTop();
introH = intro.innerHeight();
if(scrollPos>introH){
header.addClass("fixed");
} else {
header.removeClass("fixed");
}
P.s. спасибо за видео!
Спасибо дружище, без этого не работало
там проблема в самом методе load. Он почему-то срабатывает через раз или вообще может не срабатывать 5 раз подряд. Я пока что не понимаю поведения этого события load. Ведь по идее он должен срабатывать каждый раз как ты перезагружаешь страницу, а у него будто бы сбой в системе случается. Возможно это баг
@@sigvist6228 ну что, разобрался с load ?
спасибо за отличные уроки!
Не ожидал два видео сразу)
Спасибо!
Этот урок был для меня мало понятным так как я незнаком с js но тем не менее я понял как это все работает, очень хорошо изложено, как всегда на высоте. От меня 540-й лайк зашел против 0 дизлайков. Не каждый может похвастаться таким результатом! Продолжай снимать!
*Cпасибо за урок. Буду дальше изучать JS что бы лучше понимать логику кода*
0 дизлайков. Профессионализм,ничего лишнего.
Отличный урок! Странно что не был подписан, хорошо напомнил, исправляюсь! )
Thank you for the lesson) 🔥
лайк!!!! без тени сомнения!
Огромное спасибо!
Привет из 2021) смотрю ваши уроки и пытаюсь писать и это действительно получается но у меня Канешн и с костылями)))) потому что не осознаю что и как в каких то моментах работает , а потом озарение) благодарю Дмитрий за ваш профессиональный преподавательский труд) у вас я действительно учусь))
Спасибо!!!
Спасибо большое!
Ты лучший, самый лучший ютубер
хе, спасибо )
Браво!
хорошие уроки.(лайк)
Впервые имею дело с jquery и вообще с JS. Тяжелова-то воспринимать синтаксис. Как бы всё понятно разжевано, понятно что делает каждая строка кода, но сомневаюсь, что смог бы такое сделать, просто прочитав книжку, пусть и хорошую, типа Выразительный JavaScript. В общем спасибо за науку. Приятно видеть человека, который выкладывается на 100%.
Крутотааа!
Чувак ты крут!
Незнаю jQuery но знаю js, и я продолжаю делать на нём. И это круто)
так и чешется рука поставить этот дизлайк..но нет,была бы возможность,поставил бы 100500 лайков)не хочу портить такую красоту - рай для перфекциониста)
спасибо!
Я подписался!)))
Первый раз вижу чтобы за 15 к просмотров не было ни одного диза:)
Ты крут!
Всем привет подскажите на ошибку. В теги head поместил тег script src=" " положил ссылку а потом в конце написал путь к папке app.js через тот же script src=" " всё сохранил и перехожу в app.js пишу $(function() {
console.log("rabotaet"); }); сохраняю и появляется ошибки
подскажите что не так, если это мало информации напишу в личка.
Буди благодарен за помощь.
Привет, решил проблему?
Все ок, нашла сама как подключить файл js, проблема в этом была)
Одно НО. вместо 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')
}
})
})
А не знаешь из за чего jquery выдает ошибку srollTop is not a function? как раз из за let? ибо код 1 в 1 как в видео:(
Есть ещё один косяк с шапкой. Если повторно перезагрузить страницу, то шапка сразу появляться не будет. А так очень годно!
У меня такая же проблема. Когда обновляешь ниже intro, появляется, скролишь вверх не исчезает(
Конечно подписался. На такой годный контент не подписатся невозможно.
Добрый день! Спасибо за подробный урок. Посмотрел до донца и сейчас буду еще раз просматривать и повторять. Но, не избавился от вопроса: в CSS есть Position: fixed. Почему использовали JQuery а не решили эту задачу при помощи CSS? еще пожелание: у Вас получается очень хорошо объяснять, может быть вы к ActiveBox доделаете еще несколько уроков - "как "натянуть" на CMS"? WP или October (Ваш BrainsCloud.ru ведь на October CMS.
охренеть какой урок прикольный
Чтобы команда load работала в firefox, нужно переписать код так - $(window).bind("scroll load", function(). Заменить on на bind. В хроме новый код также рабоает)
Большое спасибо за урок, все очень грамотно, максимально детально, прям лучше не придумаешь... Это однозначно лучший для меня канал по верстке, именно такой стиль работы для меня пример, который я буду учиться применять!
Скажите пожалуйста будут ли у Вас уроки по JS???
Возможно, время покажет
527 лайків 0 дизлайків - це показник якості і потрібності відео. Дякую!
Я подписан )
Этот коментарий создан в качестве уважения автору и для продвижения его канала.
не одного дизлайка....ты что , бог ?
То что уже некоторые моменты апдейтнулись, это 100%.У меня без прописи load, шапка не исчезала при обновлении страницы ни в одном из 4-х браузеров.
Поставил 748-ой лайк. Еще нет ни одного дизлайка!
Дмитрий, в предыдущих видео ты сказал, что мы будем скролить шапку. Я тогда решил сразу попробовать, и сделал это через css, единственное в чем я тогда не разобрался, как background тоже тянуть за собой. Вопрос. Ты показываешь это в js просто чтобы показать, как работать в js? Или это оптимизация ненужных телодвижений в css? Т.е. можно ли сделать это в css физически и если да не будет ли это считаться детским лепетом тратой времени в глазах опытных фронт энд разработчиков?
На таком сайте использование фреймворков только усложнит разработку, тоже считаю что для лендингов нет альтернативы jq
Дмитрий, здравствуйте! Вопрос:
При перезагрузке страницы без последующего скролла (значение 0) шапка видоизменяется. Далее при любом скролле (меньше 750 px ) выполняется скрипт и js возвращает шапку в первоначальный вид. Подскажите пожалуйста, как в условии исключить выполнение скрипта в значении 0 ( при первоначальной загрузке страницы) .
Надеюсь изложил понятно!
Курс замечательный!
Круто 👍🏽. Но ничего не понятно 🙈
почему то Файрфокс не воспринимает load после scroll и не показывает ленту навигации
Как сделать плавное отображение шапки при скролле? И можно ли вообще так сделать?
А если без переменной?
if(scrollPos > $('#header').innerHeight())
В таком случае отпадают ошибки из за перезаписывания переменных.
А почему в CCS создаются селекторы .header .fixed{
position: fixed; } Не правильнее было бы их напрямую из JSa присваивать элементам?
не, ну смотреть этот канал и не подписаться... это не комильфо, товарищи!=)
По сложнее будут проекты?
код пишу в app.js на в первых 2х строчках 9 ошибок и ничего не работает( Видимо версии уже другие jquery и нужно по другому как то писать код(
Подскажите почему при скролле там где фото на весь экран(блок works) и когда доходит до фото с блока reviews хэдер опять пропадает и появляется после того как проскролил эти участки?
а вот теперь появился вопрос, а как и возможно ли сделать без библиотеки jQuery?
почему у меня без события load меню не исчезает ни в одной точке страницы при обновлении?
Ребята, помогите! Выдает ошибку $ was used before it was defined, какрешить, сохранение и подключение к новым библиотекам не помогает
забей на ошибки, в браузере все равно работает
Помогите
Что делать, если при написании конструкции $(function() {
}) ;
Выскакивают ошибки
1. '$' was used before it was defined.
2. Expected exactly one space between 'function' and '('.
3. Missing 'use strict' statement.
разобрался ?
такой же фейл. в чем проблема?
Та же ошибка, разобрался кто?
@@bloodywulf626 Да, необходимо было сохранить HTML файл
Сохранение не решило проблему. Кто-то может помочь?
Все отлично но постоянно выдает вот такую ошибку
Uncaught TypeError: this.scrollTop is not a function
at app.js:9
at dispatch (jquery.min.js:2)
at v.handle (jquery.min.js:2)
Дмитрий здравствуйте можно Адаптировать сайт добавляя медиа запросы от себя, но тоесть задавать свои breakpoint ?
да
Смотрю твое видео, 22:00 минута и у меня только один вопрос - Да откуда он все это знает, что и когда нужно применить ? Есть видос где ты рассказываешь свою историю, с чего начал, где и как учил, сколько ушло времени. Мне было интересно узнать.
Такого видео нет
@@BrainsCloud Может как то время стримчика расскажешь ? Думаю всем интересно будет.
@@dsim2632 Если такой вопрос будет, то да
@@BrainsCloud А когда следующий стрим ? Я задам )
@@dsim2632 еще не знаю, может в пятницу
6:48 И тут мне Brackets выдал много ошибок и в браузере (console) не было надписи ... Вывод: в отличии от *css и *html , перед просмотром *js надо сохранять и тогда brackets не будет выводить ошибок и в console будет отображаться корректно )
спс чувак, спас )
я то думал хули не так у меня:/
Не работает
Егор Никитин возможно ошибка у тебя в коде, ищи, сверяй, проверяй и да прибудет с тобой сила 💪
@@user-rt4pn7xt4e главное высоту 750 не пишет написано undefined ,а scroll 0 выдает
@@user-rt4pn7xt4e вы продолжаете заниматься?
нихуева, 0 дизлайков😎
Почему-то в мобильном chrome не работает фиксация меню, на компе все нормально. С чем может быть это связано?
Посмотрел до момента 12:33
Выдает при сохранении и попытке посмотреть в коде сразу 5 ошибок:
1
'$' was used before it was defined. $(function() {
1
Expected exactly one space between 'function' and '('. $(function() {
3
Missing 'use strict' statement. let jsheader = $("#jsheader");
3
Expected an identifier and instead saw 'let'. let jsheader = $("#jsheader");
3
Stopping. (30% scanned). let jsheader = $("#jsheader");
ESLint (1)
3
ERROR: Parsing error: Unexpected token jsheader let jsheader = $("#jsheader");
Так же
Смог решиттт?
@@user-ms8qx5fu8b взял в сети другой пример скрипта