Всем стоять и не двигаться!

# Всем стоять и не двигаться!

---

# Коротко обо мне

###Алексей Охрименко - Acronis

![Default-aligned image](emmet.jpg)

---

class: center, middle
# Это доклад о фиксировании чего-либо к чему-нибудь относительно чего-то

---

---

#[Smashing Magazine UX study](http://www.smashingmagazine.com/2012/09/sticky-menus-are-quicker-to-navigate/)
#на 22% быстрее

#100% предпочли фиксированную навигацию

---

# [#Yandex - Fixed](https://yandex.ru/search/?text=%D0%90%20%D0%BD%D1%83%D0%B6%D0%BD%D0%B8%20%D0%BB%D0%B8%20%D1%84%D0%B8%D0%BA%D1%81%D0%BE%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%BD%D1%8B%D0%B5%20%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%8B%3F&lr=213)
# [#Twitter - Sticky](https://twitter.com/webstandards_ru)
# [#Stack Menu](http://jsbin.com/noluso/1/edit?css,output)

---

# Вам понравились эти демки? :)

---

# Ну и зря!

---

#В вебе 100% зафиксировать
#элемент - невозможно

---

# С этого место поподробнее...

- Viewport? Зачем? Я просто хотел зафиксировать элемент

---

# С этого место поподробнее...

- Viewport? Зачем? Я просто хотел зафиксировать элемент

- position: fixed и почему оно не работает

---

# С этого место поподробнее...

- Viewport? Зачем? Я просто хотел зафиксировать элемент

- position: fixed и почему оно не работает

- position: sticky и почему оно не работает

---

# С этого место поподробнее...

- Viewport? Зачем? Я просто хотел зафиксировать элемент

- position: fixed и почему оно не работает

- position: sticky и почему оно не работает

- overflow: scroll и другие хаки и почему они не работают

---

# С этого место поподробнее

- Viewport? Зачем? Я просто хотел зафиксировать элемент

- position: fixed и почему оно не работает

- position: sticky и почему оно не работает

- overflow: scroll и другие хаки и почему они не работают

- пример из реальной жизни (Hybrid iOS email) #1

- пример из реальной жизни (3 way scroll) #2

---

# Viewport? Зачем? Я просто хотел зафиксировать элемент

---

# Да потому что обычный зум может сломать весь ваш сайт

---

# Причины:

- Cтареем,

- Зрение хуже

- Мобильные девайсы

- High DPI (aka ретина)

---

# [#Yandex Magic](https://yandex.ru/search/?text=%D0%90%20%D0%BD%D1%83%D0%B6%D0%BD%D0%B8%20%D0%BB%D0%B8%20%D1%84%D0%B8%D0%BA%D1%81%D0%BE%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%BD%D1%8B%D0%B5%20%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%8B%3F&lr=213)

---

---

#Pixels ( Device & CSS )

---

#Device Pixels

---

#Device Pixels

- Обычно все просто ( 1 квадратик - 1 пиксель )

---

#Device Pixels

- Обычно все просто ( 1 квадратик - 1 пиксель )

- Device Pixel Ratio / Virtual Pixels  - [(Четко и резко (c) Вадима Макеева)](https://www.youtube.com/watch?v=n0Vy9cYES-4)

---

#Device Pixels

- Обычно все просто ( 1 квадратик - 1 пиксель )

- Device Pixel Ratio / Virtual Pixels - [(Четко и резко (c) Вадима Макеева)](https://www.youtube.com/watch?v=n0Vy9cYES-4)

- Downsampling - [iPhone 6 plus screens demistified](http://www.paintcodeapp.com/news/iphone-6-screens-demystified)

---

#Device Pixels

- Обычно все просто ( 1 квадратик - 1 пиксель )

- Device Pixel Ratio / Virtual Pixels  - [(Четко и резко (c) Вадима Макеева)](https://www.youtube.com/watch?v=n0Vy9cYES-4)

- Downsampling - [iPhone 6 plus screens demistified](http://www.paintcodeapp.com/news/iphone-6-screens-demystified)

- Многие ожидают что браузер будет использовать именно их ( но это не так )

---

#CSS Pixels

---

#CSS Pixels

---

#CSS Pixels

---

#CSS Pixels

---

#Вьюпорт ( Десктопный и Мобильный )

---

#Десктопный вьюпорт

#[#Magic](http://output.jsbin.com/koluqo/2) (with explanation)

---

#Мобильный вьюпорт

---

---

---

---

---

---

---

---

#position: fixed и почему оно не работает

---

#position: fixed

- [CSS Positioned Layout Module Level 3](http://www.w3.org/TR/css3-positioning/#fixed-pos)

---

#position: fixed

- [CSS Positioned Layout Module Level 3](http://www.w3.org/TR/css3-positioning/#fixed-pos)

- Фиксирует элемент на странице относительно Viewport

---

#position: fixed

- [CSS Positioned Layout Module Level 3](http://www.w3.org/TR/css3-positioning/#fixed-pos)

- Фиксирует элемент на странице относительно Viewport

- Не смещается при скролле *

---

#position: fixed

- [CSS Positioned Layout Module Level 3](http://www.w3.org/TR/css3-positioning/#fixed-pos)

- Фиксирует элемент на странице относительно Viewport

- Не смещается при скролле *

- Повторяется на экранах на печати *

---

#position: fixed

- [CSS Positioned Layout Module Level 3](http://www.w3.org/TR/css3-positioning/#fixed-pos)

- Фиксирует элемент на странице относительно Viewport

- Не смещается при скролле *

- Повторяется на экранах на печати *

- Если элемент выходит за рамки дозволенного - он будет обрезан

---

#position: fixed

- [CSS Positioned Layout Module Level 3](http://www.w3.org/TR/css3-positioning/#fixed-pos)

- Фиксирует элемент на странице относительно Viewport

- Не смещается при скролле *

- Повторяется на экранах на печати *

- Если элемент выходит за рамки дозволенного - он будет обрезан

- Не участвует в document flow

---

---

---

#position: fixed - не работает

---

#position: fixed - не работает

##Input Focus
( http://jsbin.com/caxika/edit?css,output )

---

#position: fixed - не работает

#[#PerfectScrollFix overscroll](https://github.com/aiboy/PerfectScrollFix)
( http://jsbin.com/caxika/edit?css,output )

---

#position: sticky и почему оно не работает

---

#position: sticky

- [CSS Positioned Layout Module Level 3](http://www.w3.org/TR/css3-positioning/#fixed-pos)

---

#position: sticky

- [CSS Positioned Layout Module Level 3](http://www.w3.org/TR/css3-positioning/#fixed-pos)

- Ведет себя как position:relative а после - как position:fixed

#[#sticky is tricky](http://jsbin.com/kurunik/1/edit?css,output)

---

#position: sticky

- [CSS Positioned Layout Module Level 3](http://www.w3.org/TR/css3-positioning/#fixed-pos)

- Ведет себя как position:relative а после - как position:fixed

- overflow, overflow-x, or overflow-y ( не равное visible ) - выключает position:sticky

---

#position: sticky

- [CSS Positioned Layout Module Level 3](http://www.w3.org/TR/css3-positioning/#fixed-pos)

- Ведет себя как position:relative а после - как position:fixed

- overflow, overflow-x, or overflow-y ( не равное visible ) - выключает position:sticky

- [Safari - position:sticky in table cell](http://stackoverflow.com/questions/28172079/safari-position-sticky-in-table-cell)

---

---

---

#position: sticky - не работает

Нормального polyfill-a по сей день не найдено!

Но из всего что есть самый лучший это
[#fixed-sticky](https://github.com/filamentgroup/fixed-sticky)

Который не смотря на всю свое крутизну работает не стабильно и требует невозможного! ( jQuery )

---

#overflow: scroll и другие хаки и почему они не работают

---

#overflow:scroll - не работает

#[#overflow:scroll](http://jsbin.com/zogidiwagu/1/edit?css,output)

---

#overflow:scroll - не работает

-webkit-overflow-scrolling: touch

---

#[Elastic scroll problem](http://browser.colla.me/show/disable_elastic_scroll_on_iOS_safari)

![Default-aligned image](autoios1.gif)

---

#[Elastic scroll problem](http://browser.colla.me/show/disable_elastic_scroll_on_iOS_safari)

![Default-aligned image](autoios2.gif)

---

#Эмуляция скролла
#[http://scrollerjs.com/](http://scrollerjs.com/)
#[http://www.youtube.com/watch?v=VAOPi9C8674](http://www.youtube.com/watch?v=VAOPi9C8674)

---

#Эмуляция скролла - не работает

![Default-aligned image](cat.jpg)

---

#Эмуляция скролла - не работает

- Остутствует ощущение нативности

- Страдает Accesability

- Очень много ресурсов и времени уходит на оттачивание данных реализаций

---

#Примеры

---

#[#iOS web email](https://github.com/aiboy/everybody-freeze-ios-email-app)

---

#[#3 way scroll](https://github.com/aiboy/everybody-freeze-3way-scroll)

---

#THE END

---

# Q&A

###Алексей Охрименко - Acronis

![Default-aligned image](emmet.jpg)