??? ??????? ?? ???? ???? ????? ??? ???? ? ?? ???? ??? ? ???? ????? ??? ???? ??? ?? ??? ????? ????. ?? (???? ??? ?? ? ??).

?? ????? ????? ?? ????? ???????. ??? ????? ??? ???? ?? JavaScript? ???? ???? ?? ??? ??

? position ??? ?? ?????. ?????, ??? ???? ? ???? ?, ??? ??? top ? top: 0? ??????, ??? ??? ??? ????? ?????. position: fixed ? ?? ??? ?? ??? CSS?? ??? ?? ???? ???? ??? ?? ??? ?? JavaScript? ???? ???? ?? ? ???? ????.

? ?? ? ??? ?? ??? Internet Explorer? ???? ????. ? ????? ?? ???? ?? (??? ??!), ?? ??? ??? ??? ? ?? ?? ? ??? ?? ? ????.

? ? ?? ??? ??? ??? ??? ????. ?? ? ?? ??

var menu = document.querySelector('.menu')
var menuPosition = menu.getBoundingClientRect().top;
window.addEventListener('scroll', function() {
    if (window.pageYOffset >= menuPosition) {
        menu.style.position = 'fixed';
        menu.style.top = '0px';
    } else {
        menu.style.position = 'static';
        menu.style.top = '';
    }
});

??? ???! ? ??? ?? ??? ?? ? ????? ???? ?? ? ??? ???? ?? ? ?? ??? ??? ??? ???? ?????. ??? ??? ??

? ???? ???? ???? ??? ??? ?? ??? ?? ??? ?? ?? ?? ???? "??"? ???? ?? ????. ??, ?? ?).

??? ???? "?? ??"? ??? ??? ??? ??? ?? ?? ? ??? ???? ?? ??? ??? ???? ???? ? ? ??? ????. ?? ??? ?? ??? ?? ???? ?? ????? ? ???? ?? ????. ????? CSS ???? ???? ??? ??? ????????.

JavaScript ??? ?? ??? ??? ????.

??? ???? ?? ?????. ?? ???? ?? ??? ?????. <<> ?? ? ?? ??

?? ??? ????, ??? JavaScript ?? ???? ???? ? ???? ???? ???? ?????? fixed? ???? ?? ? ????.

<:> ??? ????? : ????

??? ?? ??? ???? ??? "????? ? ?? ?? ??? ? ? ?????"

<<>? CSS ??? ?? ? ??? ????. ? ?? ??? ??? ?? ?? ?? ? ??? ?? ?? ???

?? ???????.? ?? ??

var menu = document.querySelector('.menu');
var menuPosition = menu.getBoundingClientRect();
var placeholder = document.createElement('div');
placeholder.style.width = menuPosition.width + 'px';
placeholder.style.height = menuPosition.height + 'px';
var isAdded = false;

window.addEventListener('scroll', function() {
    if (window.pageYOffset >= menuPosition.top && !isAdded) {
        menu.classList.add('sticky');
        menu.parentNode.insertBefore(placeholder, menu);
        isAdded = true;
    } else if (window.pageYOffset < menuPosition.top && isAdded) {
        menu.classList.remove('sticky');
        menu.parentNode.removeChild(placeholder);
        isAdded = false;
    }
});

? ??? ?? ????. ?? ??,

? ???? ?? ???? ?? ? ??? JavaScript?? ??? ? ????. sticky ?? ??? ?? ??? ??? ?? ???? ??? ? ? ????. </p> <er> ????? ???? ? ????! ??? ?????. <pre class='brush:php;toolbar:false;'>.sticky { top: 0; position: fixed; } ???? ?? ? ?? ?? ? ??? ??? ?? ??? ?? ?? ????. ? ????? ?? ??? ??? ???? Firefox 26 - css.stisty.enabled? "true"? ???? ????? : config.

Chrome 23 - Chrome : // ????? ?? ? ??? ??? ????? ?????.

Chrome 38 (?) - Chrome ?? ?? ?? ??? Blink?? ?? ???? ?? Chrome Canary (?? 38.x)??? ??? ???? ????. ??? ???? ?? ???? ?? ? ???? ??? ? ?? ?? ? ??? ???? ??? ??? ???? ?? ? ????.

Safari 6.1 -
• ?? ?? ???? ?? ??? ?? ????? (? : Opera 23 - About : Flags?? ???? ? ??? ??? ????? ?????.
??? ????? - ???? ?? (?? ??)
on on on on on the rese… ?? ?? ??? ??????.
• ? ??? ??? ??? ?? ?? ????? ????
???? ??? ?? ?? ??? (jQuery ??) Matthew Phillips? ???- ??- (Modernizr? ??) Philip Walton 's Polyfill.js ???????
• Fabrice Weinberg? Codepen ?? (jQuery ??) Oleg Korsunsky 's Stickyfill (IE9) -webkit position: -webkit-sticky ?? ?? ???
? ?? ??? ?????. ??? ????? ???? ???? ????? ?? ???? ????? ? ?? ????.
• ?? ? ?? ??
?? ? ??? ???? ???? ??? ???? ??? ModernIzr? ?? ???? ???? ?? ??? ??? ?? ????.

? ??? ????? ?? ?? ??? ?? ??? ??? ??????.

CSS ?? ?? ??? (faq) CSS ?? ???? ?? CSS ??? ???? ?????? position: sticky css

? ?? ??? ?? ??? ??????. ??? ???? ???? ?? ? ??? ??? ?? ?? ??? ?? ???? ?? ? ? ????.? ???? ?? ??????. ??? ?? CSS ??? ????. ?? ??, "??"??? ???? ??? ?? ??? ?? ??? ?? ? ? ??? "?? ?"??? ???? ?? ?? ??? ????? ???? ????? ???? ???? ????. . "??"??? ?? ??? ?? ??? ???? ??? ?? "??"? ????? ???? ?? ??? ?? ??? ????.

? CSS ??? ? ?? ???? ?????

CSS

? ? ?? ??? ???? ????. ???? ??? ?? ??? ??? , position: sticky ?? overflow? ???? ?????. ? ?? ??? ?? ??? ??? ??? ? ?? ????? ????? ????? ??? ? ????. ?? ?? ??????? CSS hidden? ??? ???? ???? ?? ??? ??? ??? ??? ??? ??? ??????. auto ?? ?????? CSS ??? ?? ??? ??? ??? ?????? scroll CSS position: sticky? ?? ?????? ?? ????? ?? ?? ????? ???? ?? ? ????. ?? ?????? ???? ???? ?? PolyFill? ??? ? ????. Polyfill? ????? ????? ?? ? ??? ???? ???????. CSS

? ?? ???? ?? ?? StickyFill???.

?? CSS ??? ?? CSS ??? ??? ? ?????

?, ?? CSS ??? ?? CSS

? ??? ? ????. ?? ??, ? ?? ???? ??? ??? ????? position: sticky? ??? ?? ?? ? ? ??? ??? ?? ? ????. position: sticky CSS? ??? ?????? ??? ?? ??? ??? ??????

?? ??? ??? ?? ???? ??? ??? ??? ??? ? ? ???? ??? ?? ?? ????? ?? ????? ??? ? ?? ?? ????.

?? ???? CSS ?? ???? ??? ? ?????

?, ?? ???? css

? ??? ? ????. position: sticky ??? ?? ?? ?? ???????. ????? ??? ????? ??? ?? ????. z-index CSS ?? ?? ??? ??? ??? ?????? box-shadow ??? CSS

? ??? ??? ?? ???? ?????. ??? ?? ??? ?? ?? ??? ??? ?? ?? ?? ??? ?????.

?? ???? CSS ?? ???? ??? ? ?????

?, ?? ???? CSS

? ??? ? ????. ?? ??? ??

?? ??? ?? ?? ???????.

CSS ??? ???? ?? ??? ???? ???? ?? ????

??? ???? , ,

? ??? ?? ?????. ? ??? ?? ??? ?? ??? ?? ?? ???? ???? ?? ??????? ??? ?????. position: sticky CSS ??? CSS ??? ?? ??? ? ????? bottom ?, CSS ??? ?? CSS

? ??? ? ????. ??? ??? ??? ?? ???? ?? ??? ?? ?? ?? ?? ?? ?????.

?? CodePen ??? ??? ? ? ?? ??? CodePen ??? ?? ?? ?? ??????. ? ?? ???? ?? ??? ???????. ?? ?? ???? ??? ? ?? ?? ???? ?? ??? ??? ?? ??? ? ???? ????? ??? ?? ??????.