header = ->
$ = require "jquery"
moduleName = 'header'
sticker = $ ".#{moduleName}__sticker"
stickOffset = $ ".#{moduleName}__sticker-offset"
stickerOffsetStatic = sticker.offset().top
console.log stickerOffsetStatic
$(window).scroll(
->
if $(window).scrollTop() > stickerOffsetStatic
sticker.addClass "#{moduleName}__sticker--sticky"
stickOffset.addClass "#{moduleName}__sticker-offset--active"
else
sticker.removeClass "#{moduleName}__sticker--sticky"
stickOffset.removeClass "#{moduleName}__sticker-offset--active"
)
.header__sticker-offset.header__sticker-offset--md
.header
//блоки в header, которые скроллятся
.header__sticker
//прилипающие блоки
.header{
width: 100%;
background-color: #191919;
position: relative;
z-index: 10;
&__sticker-offset{
width: 100%;
height: 0;
&--active{
height: 60px;
}
}
&__sticker{
min-height: 60px;
display: flex;
align-items: center;
position: relative;
z-index: 10;
background-color: #191919;
transition: 0.15s ease-in;
&--sticky{
background-color: #292929;
position: fixed;
top: 0;
right: 0;
left: 0;
}
}
&__offset{
height: 60px;
}
Верстка это создание HTML-страниц с оформлением в CSS
The file is exported only when cpufreq driver supports boosting.
мне вот интересно, зачем человеку, который только учится, знать о каком-то там node.js