다른 고정 요소 (가변 높이)에 상대적으로 스틱 Div

Question

첫 번째 메뉴 아래에 두 번째 메뉴를 고정하려고합니다. 첫 번째 메뉴는 기본적으로 고정되어 있습니다 (테마 설정).

모바일/데스크톱에 따라 첫 번째 메뉴의 높이가 달라 지므로 top : 120px 또는 그 이상을 설정할 수 없습니다.

나는 시도해 보았다 : 끈적 거리고 잘 작동하도록 만들었지 만, 모바일에서 테스트 할 때 문제가 시작된다.

그래서; 첫 번째 메뉴 아래에 두 번째 메뉴를 끈적 거리게 만들 가능성이 있습니까? 사전에

https://www.salonivon.nl/custom-webshop-tryout/

감사합니다, 리처드

Answer 1

내가 사용하는 코드는 :이만큼 내가 바탕 화면에있어로 작동

`.my-extra-WooWidget{ 
position: sticky; 
top: 104px; 
z-index: 100; 
background:white; 
width:100%; 
padding-bottom:10px; 
} 

`

. 다음 모바일 화면 크기에 대해 다른 값을 설정 미디어 쿼리를 사용하여, top: 105px :

은 내가 고정 된 위치를 사용하여 상단의 CSS 설정을 제안

Answer 2

그래도 헤더를 변경할 수 없습니다입니다. 다음은 코드 샘플입니다.

widget.my-extra-WooWidget { 
    top: 105px; /*Use a suitable value here*/ 
    left: 0; 
    right: 0; 
    background-color: #fff; 
    position: fixed; 
    z-index: 1; 
} 
@media (max-width: 768px) /*Use a suitable screen size here*/ { 
    top: 76px; /*Use a suitable value here*/ 
}