CSS sticky
본문
https://sir.kr/cm_free/1551829
CSS 고수의 도움이 필요합니다.
2번째 관련입니다. 2개의 그림을 보시면
상단 Toolbar menu에 class="vditor-toolbar--pin" 에 position: sticky가 들어 갑니다.
(아이폰은 position: -webkit-sticky : 아이폰은 잘 안붙네요..)
그러면 그림과 같이 메뉴의 상단에 잘 붙는데,
여기서 문제가 아래 텍스트 입력 부분 class="vditor-content" 가 툴바 아래로 숨는다는 것입니다.
이곳 저곳 검색을 해보니, https://www.w3schools.com/howto/howto_js_navbar_sticky.asp
https://css-tricks.com/scroll-fix-content/
sticky 아래로 글이 들어가는 것은 맞는 것 같습니다.
스마트 폰에서 입력시 툴바는 상단에 붙고, 입력창은 툴바아래에 숨지 않는 방법을 알려주세요.
(그누보드 에디터 입력시에 상단에 제목이 있고, 하단에 링크 파일 입력도 있다는 것을 고려해주세요.)
1. 안드로이드 폰/크롬에서
2. 아이폰/크롬 또는 사파리에서
현재까지 검색해 본 것으로는 CSS만은 안되고 아마도 Javascript까지 들어가야 되는데, 딱 입맛에 맞는 코드를 못찾고 있습니다.
댓글목록 10
무와보님의 댓글
무와보 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 아이피 (175.♡.♡.20) 작성일
혹시 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 속성만 가지고 원하시는 모양을 뽑아내기가 쉽지 않아 보이네요.
아무래도 스크립트의 도움을 받으셔야 할 것 같습니다.
마젠토님의 댓글의 댓글
마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 아이피 (47.♡.♡.2) 작성일
headrom.js 는 스크롤되면서 탑이 사라지는 것 같습니다.
https://docker.apachezone.com/bbs/board.php?bo_table=blog&wr_id=55
1번 문제를 해결할려고 하는데.. http://74.208.27.41/ 로 접속해서 에디팅 부분을 클릭하면 키보드가 올라오면서..
툴바는 상단에 붙고, 커서 위치는 툴바아래로 같이 올라간다는 것입니다.
여러가지 검색해 보니 역시 스크립트가 필요한 것 같아서. 이곳저곳에 요청중입니다. (답은 없지만.)
마젠토님의 댓글
마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 아이피 (47.♡.♡.2) 작성일스마트폰에서 테스트 해 볼수 있도록 최신버전을 올려 놨습니다.
http://74.208.27.41/
1. 상단에 잘 붙어 있는지..
2. 아이폰은 터치로 조정을 하면 붙어 있는 것 같습니다.
3. 스마트 폰에서 입력시 불편한점도.. (코드블락이나 테이블 다음에 입력하는 키가 없음( 다운 화살표키로.)