을 만들고 싶 Navigation Bar 상단에 충실하면 내가 스크롤하지만,'s 작동하지 않은 왜 이다. 할 수 있는 경우 도와주세요,여기에 내 HTML 과 CSS 코드:
.nav-selections {
text-transform: uppercase;
letter-spacing: 5px;
font: 18px "lato",sans-serif;
display: inline-block;
text-decoration: none;
color: white;
padding: 18px;
float: right;
margin-left: 50px;
transition: 1.5s;
}
.nav-selections:hover{
transition: 1.5s;
color: black;
}
ul {
background-color: #B79b58;
overflow: auto;
}
li {
list-style-type: none;
}
<nav style="position: sticky; position: -webkit-sticky;">
<ul align="left">
<li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
<li><a href="#/about" class="nav-selections">About</a></li>
<li><a href="#/products" class="nav-selections">Products</a></li>
<li><a href="#" class="nav-selections">Home</a></li>
</ul>
</nav>
스티커 위치는 하이브리드의 상대적 고정 위치. 요소의 상대경로로 받아들인 위치해 있을 때까지 그것은 십자가 지정된 임계값을 어느 시점에서 그것으로 처리되는 고정 배치됩니다. ... 해야 합니다 임계값을 지정 중 하나 이상에서
정상
,올바른
,바닥
,또는왼쪽
끈적 끈적한 위치를 예상대로 작동합니다. 그렇지 않으면 서로 구별할 수 없는 상대적인 위치. [출처:반]
그래서 예에서,당신은 당신의 위치를 정의하는 그것은 결국 스틱을 사용하여최고
을 제공합니다.
html, body {
height: 200%;
}
nav {
position: sticky;
position: -webkit-sticky;
top: 0; /* required */
}
.nav-selections {
text-transform: uppercase;
letter-spacing: 5px;
font: 18px "lato", sans-serif;
display: inline-block;
text-decoration: none;
color: white;
padding: 18px;
float: right;
margin-left: 50px;
transition: 1.5s;
}
.nav-selections:hover {
transition: 1.5s;
color: black;
}
ul {
background-color: #B79b58;
overflow: auto;
}
li {
list-style-type: none;
}
<nav>
<ul align="left">
<li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
<li><a href="#/about" class="nav-selections">About</a></li>
<li><a href="#/products" class="nav-selections">Products</a></li>
<li><a href="#" class="nav-selections">Home</a></li>
</ul>
</nav>
몇 가지 더 많은 것을 나는've come across:
때 당신의 끈적 끈적한 요소를 구성 요소입니다(각 etc.)
*경우에는'스티커'요소는 그 자체가 구성요소와 사용자 지정 요소의 선택,등 각 구성요소라는<응용 프로그램 메뉴 바>
을 추가해야 하는 다음과 같은 구성 요소는's css:
:호스트{display:block;} 나
응용 프로그램-메뉴 바{display:block;}//(에서 구성 요소를 포함하는's css)
Safari iOS 에서 특정 요구하는 것 같display:block
도 루트에서 요소에응용 프로그램-root
의 각 응용 프로그램이나 그't 다.
*을 만드는 경우에는 구성 요소를 정의하 css 내부 구성 요소(shadow DOM/캡슐화된 스타일),는지 확인위치:끈끈한
에 적용되고 있는'외부'선택(예를 들어,.응용 프로그램 메뉴 바에서
개발자 도구를 표시해야 끈끈한 위치)와 최고 수준div
내**의 구성 요소입니다. 으로 각도,이를 달성될 수 있으로:호스트
에서 선택기 css 에 대한 귀하의 구성 요소입니다.
:스 { 위치:스티커; display:block;//이것은 같은 위와 같이 최고:0; 배경:red; }
기타
*는 경우 요소는 다음과 같은 당신의 끈적 끈적한 요소는 고체 배경,추가해야 합니다 다음을 중지에서 미끄러지 밑:
.끈끈한 요소{z-index:100;} .부모의 끈적 끈적한 요소{position:relative;}
*당신의 끈적 끈적한 요소가 있어야 하며 처음(기 전에 당신의 콘텐츠)에 사용하는 경우에정상
후 그것을 사용하는 경우 아래`.
*합병증이 있을 때 사용하는overflow:hidden
의 래퍼 요소–에서 일반적으로 죽일 것이 끈끈한 요소 내부입니다. 더 나은 설명서에서 이 질문
*모바일 브라우저를 사용 중지할 수 있습 점착/고정한 항목을 때는 화면 키보드가 표시됩니다. 나는'm 정확한 규칙(않는 사람은 아무도 알아요)하지만 키보드 표시되 너는'다시 찾고 정'window'으로 창고지 않't 쉽게 얻을 수 있을 것 지팡이 실제 볼 수 있다.
*확인:
위치:스티커;
지
표시:스티커;
기타 유용성 우려
주의하는 경우 디자인에 대한 통화를 위한 것들이 화면 아래에서 모바일 장치에 있습니다. 아이폰 X 예를 들어 그들은 디스플레이 좁은 라인을 나타내는 밀 영역(다시 얻을 수있 홈페이지)-요소와 내부 이 지역의 아't 클릭할 수 있습니다. 그래서 만약 당신이 지팡이가 있을 테스트해야 합 아이폰 X 는 사용자를 활성화할 수 있습니다. 큰'을 구입 지금'단추면 더 좋은 사람이 할 수 있't 을 클릭합니다! 경'시에 광고 Facebook 웹 페이지에 표시되는'webview'컨트롤 내 Facebook's 습니다. 특히 표시할 때 비디오(여기서 당신의 콘텐츠에 시작하여 화면의 아래쪽 절반만 해당)-그들은 종종 완전히 혼란을 끈끈한 요소를 넣어 당신의 페이지에 스크롤 뷰포트에는 실제로 당신의 끈적 끈적한 요소들을 사라지게 최고의 페이지입니다. 을 테스트해야의 컨텍스트에서 실제 광고지에서 휴대 전화's 브라우저 또는 Facebook's 브라우저는 모두 다르게 작동합니다.
이것은 계속되는 답변에서 MarsAndBack 및 Miftah Mizwar.
그들의 답변은 정확합니다. 그러나 그것은 어려운 문제를 식별 조상(s).
이것을 매우 간단하다,간단하게 실행하는 이 jQuery 스크립트가 귀하의 브라우저에서 콘솔하고 그것을 말할 것이다 당신의 값의 오버플로우 시설에는 모든 조상이라고 합니다.
$('.your-sticky-element').parents().filter(function() {
console.log($(this));
console.log($(this).css('overflow'));
return $(this).css('overflow') === 'hidden';
});
는 조상이 없overflow:표시
경 CSS 있도록!
또한 명시된 바와 같이,다른 곳에서 확인하는 끈끈한 요소이에서 CSS:
.your-sticky-element {
position: sticky;
top: 0;
}
를 사용했다면 다음과 같은 CSS 하는 작업을 얻을:
.parent {
display: flex;
justify-content: space-around;
align-items: flex-start;
overflow: visible;
}
.sticky {
position: sticky;
position: -webkit-sticky;
top: 0;
}
면 위에 나던't 업 then...
가을 통해 모든 조상하고 있는지 확인도 이러한 요소를 가지는overflow:hidden
. 당신이 변화하 이하오버플로:볼 수 있
에서 나의 코멘트:
위치:끈끈한
이 필요 coordonate 하는 전화는 어디에 붙
nav {
position: sticky;
top: 0;
}
.nav-selections {
text-transform: uppercase;
letter-spacing: 5px;
font: 18px "lato", sans-serif;
display: inline-block;
text-decoration: none;
color: white;
padding: 18px;
float: right;
margin-left: 50px;
transition: 1.5s;
}
.nav-selections:hover {
transition: 1.5s;
color: black;
}
ul {
background-color: #B79b58;
overflow: auto;
}
li {
list-style-type: none;
}
body {
height: 200vh;
}
<nav>
<ul align="left">
<li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
<li><a href="#/about" class="nav-selections">About</a></li>
<li><a href="#/products" class="nav-selections">Products</a></li>
<li><a href="#" class="nav-selections">Home</a></li>
</ul>
</nav>
가 polyfill 사용하기 위해 다른 브라우저에 보다 FF 및 크롬입니다. 이 실험적인 규칙 구현할 수 있는지 언제든지를 통해 브라우저입니다. Chrome 에 추가 그것의 몇 년 전에 다 떨어졌다,그것은 보인다 하지만 얼마나?
가장 가까운 것이 위치:상대적인+coordonates 업데이트 스크롤하는 동안 한 번에 도달 끈적 지점,당신이 설정하고 싶은 경우에 당신은 이것으로 자바 스크립트
두 여기에 대한 답:
을 제거하오버플로
속성에서는몸
태그
setheight:100%``몸
문제를 해결하기 위해overflow-y:자동
min-height:100%지 작업을 대신
height:100%`
믿이 문서이 말하는 방법에 대해 많은끈끈한
작품
CSS 가 어떻게 위치 끈끈한다. CSS 위치 끈적은 크게 두 가지 부분으로 구성되어 있,끈끈한 항목이&스티커 컨테이너.
끈끈한 항목—는 요소는 우리 정의된 위치:끈끈한 스타일이다. 요소가 뜰 때는 뷰포트 위치 위치를 정의,예를 들어
top:0px
.끈끈한 컨테이너—HTML 요소 감싸는 끈끈한 항목입니다. 이 최대한 영역는 끈끈한 항목을 뜰 수 있습니다.
를 정의할 때는 요소 위치:끈끈한 당신이 자동으로 을 정의하는 상위 요소로 끈끈한 컨테이너!
내가 이것을 알고 있는 것 같이 이미 대답만으로는 특정한 경우,그리고 저는 이렇게 답변합니다.
는overflow:hidden
답변을 덮개를 90%의 경우입니다. 는's 이 더 많거나 적"끈끈한 nav"오.
그러나 끈끈한 동작이 가장 좋 내에서 사용되는 고도의 컨테이너입니다. 생각의 뉴스 레터 양식에서 오른쪽의 열의 웹 사이트는 스크롤 다운로 페이지입니다. 는 경우에 당신의 끈적 끈적한 요소입니다만 아동의 컨테이너,컨테이너은 정확히 동일한 크기,그리고 있's 지 스크롤합니다.
컨테이너해야하는 고도의 요소를 스크롤습니다. 에 나"오른쪽 열"시나리오를 높이의 열을 떠났다.
최고의 방법으로 이를 달성하기 위해 사용표시:테이블 세포
에는 열이 있습니다. 할 수 있는 경우't,그리고 붙어있는float:right
과 같은 다음과 같이었고,당신이'll 하거나 추측 왼쪽 열의 높이를 계산하는것으로 자바 스크립트.