CSS sticky > 질문답변

스마트폰에서 테스트 해 볼수 있도록 최신버전을 올려 놨습니다.

http://74.208.27.41/

1. 상단에 잘 붙어 있는지..
2. 아이폰은 터치로 조정을 하면 붙어 있는 것 같습니다.
3. 스마트 폰에서 입력시 불편한점도.. (코드블락이나 테이블 다음에 입력하는 키가 없음( 다운 화살표키로.)

https://www.w3schools.com/cssref/tryit.asp?filename=trycss_position_sticky

position: -webkit-sticky;
position: sticky;
이기능이 이런거 였군요.

안드로이드계열은 잘 되는 것 확인했습니다.  아이패드 프로도 잘 되는 것 같구요..

화면이 작은 폰에서 약간의 문제를 업그레이드 하기 위해서 이것 저것 테스트중입니다.

가지고 있는 아이패드는 2세대인것 같은데,  크롬이 버전 63이네요.. ㅠㅠ

혹시 headroom.js 사용해보셨나요? (클래스 명에 --pin 이 들어가길래 여쭤봅니다)

그것과 상관 없이 마젠토님 질문이 에디터 작성때 툴바 밑으로 입력창이 빨려 들어가는 것이 문제이신 것 같은데..
원하시는 그림이
툴바 상단 고정 & 바로 밑에 입력창이 계속 빨려들어가지 않고 바로 붙어서 고정되고 입력창은 스크롤로 처리하는 모양새 > 이 경우인지
툴바 상단 고정 & 바로 밑에 입력창이 처음에 그대로 나왔다가 입력시에 줄이 넘어가면서 자연스럽게 빨려들어가는 모양새 > 이 경우인지
구별이 잘 안가네요.

이런 경우는 Nav를 만들 때 가장 고민하는 부분 중 하나인 것 같습니다.

<div class="editor">
  <div class="toolbar"></div>
  <div class="textarea"></div>
</div>

위와 같은 구조일 때 toolbar에 vditor-toolbar--pin 클래스가 붙는 것 맞나요?
만약 이게 맞다면 css 처리하시면서

.toolbar.vditor-toolbar--pin {}
.toolbar + .textarea {}
.toolbar.vditor-toolbar--pin + .textarea {}

이렇게 textarea 부분에 스타일을 구별해서 줄 수 있는데 이 방법은 사용해보셨나요?

또는 vditor-toolbar--pin 클래스를 editor 클래스에 주고 아래 부분을

.editor.vditor-toolbar--pin .toolvbar {}
.editor.vditor-toolbar--pin .textarea {}

이렇게 처리해도 비슷한 결과를 낼 수 있습니다.

그런데 문제는 css의 stycky 속성만 가지고 원하시는 모양을 뽑아내기가 쉽지 않아 보이네요.
아무래도 스크립트의 도움을 받으셔야 할 것 같습니다.

headrom.js 는 스크롤되면서 탑이 사라지는 것 같습니다.
https://docker.apachezone.com/bbs/board.php?bo_table=blog&wr_id=55
1번 문제를 해결할려고 하는데..  http://74.208.27.41/  로 접속해서 에디팅 부분을 클릭하면 키보드가 올라오면서..
툴바는 상단에 붙고,  커서 위치는 툴바아래로 같이 올라간다는 것입니다. 
여러가지 검색해 보니 역시 스크립트가 필요한 것 같아서.  이곳저곳에 요청중입니다. (답은 없지만.)

https://imgur.com/a/5CnMOZq

아이폰11프로맥스 + 크롬 80.0.3987.95 입니다.
그럼 위처럼 나오는 것도 잘못된 거네요?

아이폰도 가능하면 안드로이드 처럼 나왔으면 하는데,  한계가 있네요..
아마도 시간이 지나면 브라우저 업그레이드가 되면서 해결 되겠죠..

아이폰은 처음에는 안되지만,  미리 붙여 놓고 쓰면 되는 것 같습니다.
아니면 최대화 버튼을 클릭해서 입력하는 방법도..

네 처음 한번만 그러하고 그 뒤에는 괜찮은 것 같습니다.

지금은 2번, 3번, 4번에 집중하고 있습니다.

전 그냥 배포 해 주시는대로 쓸께요......ㅎㅎ