Please Enable JavaScript!
Mohon Aktifkan Javascript![ Enable JavaScript ]

CSS sticky > 질문답변

본문 바로가기
사이트 내 전체검색

질문답변

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까지 들어가야 되는데,  딱 입맛에 맞는 코드를 못찾고 있습니다.

답변만 하셔도 기본적으로 50P,답변채택시 내공 포인트 1,000P 가 지급됩니다. 답변 마감일 :2020 년 5 월 31 일

댓글목록

profile_image

마젠토님의 댓글

마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 us 아이피 (47.♡.♡.2) 작성일

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

http://74.208.27.41/

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

profile_image

아파치님의 댓글

아파치 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 us 아이피 (173.♡.♡.136) 작성일

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

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

profile_image

마젠토님의 댓글의 댓글

마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 us 아이피 (47.♡.♡.2) 작성일

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

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

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

profile_image
채택완료

무와보님의 댓글

무와보 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 kr 아이피 (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 속성만 가지고 원하시는 모양을 뽑아내기가 쉽지 않아 보이네요.
아무래도 스크립트의 도움을 받으셔야 할 것 같습니다.

profile_image

마젠토님의 댓글의 댓글

마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 us 아이피 (47.♡.♡.2) 작성일

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

profile_image

무와보님의 댓글

무와보 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 kr 아이피 (175.♡.♡.20) 작성일

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

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

profile_image

마젠토님의 댓글의 댓글

마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 us 아이피 (47.♡.♡.2) 작성일

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

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

profile_image

무와보님의 댓글의 댓글

무와보 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 kr 아이피 (175.♡.♡.20) 작성일

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

profile_image

마젠토님의 댓글의 댓글

마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 us 아이피 (47.♡.♡.2) 작성일

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

profile_image

웹지기님의 댓글

웹지기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 us 아이피 (173.♡.♡.136) 작성일

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

※ 답변기간이 종료되어 추가 답변이 불가 합니다.
질문답변 목록
번호 포인트 제목 답변 글쓴이 조회 날짜
151 200 댓글+ 1 no_profile 단풍 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11041 04-20
150 500 댓글+ 2 no_profile 단풍 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11115 04-20
149 200 댓글+ 2 no_profile 그누고수가될꼬야 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11549 04-19
148 500 댓글+ 2 no_profile 휴매니아 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 15358 04-17
열람중 1000 댓글+ 10 마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11776 04-13
146 200 댓글+ 1 no_profile 가이더 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10370 04-13
145 200 댓글+ 1 no_profile 가이더 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 13812 04-07
144 200 댓글+ 1 no_profile SK20031 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12171 04-05
143 300 no_profile 돋보기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 9563 03-27
142 1000 댓글+ 7 no_profile dawn 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11047 03-21
141 200 댓글+ 8 마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 13043 03-20
140 200 댓글+ 1 no_profile 돋보기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 9756 03-17
139 500 댓글+ 1 no_profile 써씨네 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 9130 03-16
138 300 댓글+ 2 no_profile 돋보기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10715 03-16
137 200 댓글+ 4 no_profile dawn 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12477 02-27

검색

회원로그인

회원가입
QnA nanoomihost. dnsever. dnszi.

사이트 정보

포인트 정책
포인트 순위
사이트명 : 아파치존
개인정보관리책임자 : JOO SUNG

접속자집계

오늘
963
어제
5,052
최대
176,238
전체
6,383,707
Copyright © apachezone.com. All rights reserved.