고정 요소와 중복되는 것을 피하십시오

웹 페이지 상단에 고정 탐색 기능을 만들고 있습니다. 그러나 래퍼 내용이 겹칠 것입니다. 그래서 jQuery를 함께 여백 정상을하고 있어요 :고정 요소와 중복되는 것을 피하십시오

$('#wrapper').css('margin-top', function() {return $('nav').height();});

nav { 
 
    background-color: #cccccc; 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    line-height: 2.5; 
 
} 
 

 
@media screen and (min-width: 800px) { 
 
    nav { 
 
     line-height: 1.5; 
 
    } 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 

 
<nav> 
 
    NAV 
 
</nav> 
 
<div id="wrapper"> 
 
    <header id="header" class="alt"> 
 
     HEADER 
 
    </header> 
 
    <main> 
 
     Lorem <br> 
 
     ipsum <br> 
 
     dolor <br> 
 
     sit <br> 
 
     amet <br> 
 
    </main>  
 
</div>

그러나이 후, 나는 작은 창에서 페이지를 연 다음 최대화 경우 탐색의 크기를 조정하지만 margin-top 할 것 똑같이있어.

내가 알기로 css 함수는 한 번만 호출됩니다. #wrapper의 margin-top을 height의 nav에 바인딩 할 수 있습니까? 창 크기 조절에

출처

2016-09-10 marmistrz

설정하여주십시오. 예를 들면 다음과 같습니다.

function setWrapper() { 
    $('#wrapper').css('margin-top', $('nav').height()); 
}; 

$(setWrapper); 
$(window).resize(setWrapper);

기능 호출을 스로틀 또는 디 바운싱 할 수도 있습니다.

다른 방법으로 "일반"CSS 및 미디어 쿼리를 사용하여 여백 가기를 설정할 수 있습니다.

출처

2016-09-10 20:42:42 yezzz

그러나 저는'line-height'가 아니라' 탐색을위한 픽셀 높이, 그래서 나는 그것을 보통의 CSS, afaik에서 실제로 사용할 수 없다. 게다가'$ ('nav') .resize (...)'를 사용하면 어떨까요? 이것은 미래의 navbar 높이 변경에 대해 안전하지 않을 것이며, 윈도우 크기 조정과 관련되지 않습니다. 스로틀 또는 디 바운싱이란 무엇을 의미합니까? – marmistrz

아하 나는 당신이 높이를 알고 있다고 생각했으나 창 너비에 따라 자주 바뀌었다 (따라서 미디어 쿼리). 어쨌든, jquery가 갈 길입니다. resize 이벤트는 창에서만 트리거되는 것 같아서 사용해야합니다. – yezzz

그건 그렇고, 당신은 함수와 반환이 필요하지 않습니다. – yezzz

리콜 설정 : 문서 준비에 창 크기 조절에

$(window).resize(function(){ 
$('#wrapper').css('margin-top', function() {return $('nav').height();}); 
})

출처

2016-09-10 20:28:49

당신은 시작에 크기 조정 이벤트를 트리거해야 할뿐만 아니라 같은 다음의 것 나는? – marmistrz

예. 나는'$ (document) .ready()'와'$ (window) .resize()'에서 한번만 호출해야하기 때문에 ** Recall **을 말했습니다. –

내가 원래`.CSS (...) '호와'resize` 처리기를 모두하지 않습니다 필요

$(window).resize(function(){ 
    $('#wrapper').css('margin-top', $('nav').height()); 
}).trigger('resize');

출처

2016-09-11 01:57:59

고정 요소와 중복되는 것을 피하십시오

답변

관련 문제