div 표시/숨기기가 발생했습니다.

Question

페이지 스크롤의 특정 지점에서 nav를 숨기고 표시하는 jquery가 있습니다. 유일한 문제는 navs 포스팅이 relative에서 fixed로 변경 될 때 페이지의 모든 내용을 nav가 있던 공간을 채우기 위해 위쪽으로 이동한다는 것입니다. 작동하는 솔루션을 찾을 수없는 것 같습니다. 이 일정 금액을 스크롤 한 후 fixed을되기 전에

if ($(this).scrollTop() > 800) { 
    $('nav a').css({ 
     "color": "#555" 
    }); 
    $('header').css({ 
     "position": "fixed", 
     "top": "0px", 
     "background": "white" 
    }); 
} else { 
    if ($(this).scrollTop() <= 800) { 
     $('nav a').css({ 
      "color": "white" 
     }); 
     $('header').css({ 
      "position": "relative", 
      "top": "0px", 
      "background": "none" 
     }); 
    } 
} 

Answer 1

이 일을, 당신은 항상 position: absolute;으로 탐색 스타일을해야 다음은 스크립트입니다. nav 섹션을위한 공간을 허용하기 위해 나머지 컨텐츠의 스타일을 지정해야합니다 (고정 된 높이를 유지해야합니다). 그러나 "점프"효과는 없습니다.

Answer 2

세트 :

이

position: absolute; 
top:0; left:0; 

절대 위치는 다음, 모든 요소 위에 그것을 만들 것이 그냥 생각 여백 페이지에 다른 일을 방해하지 않고 입장 할 수 & 왼쪽 ...

Answer 3

맨 :

visibility ~ hidden을 지정하고 헤더의 복제본을 만드십시오.

if ($(this).scrollTop() > 800) { 
$('nav a').css({ 
    "color": "#555" 
}); 
var $clone = $('header').clone(); 
$clone.css({ 
    "position": "fixed", 
    "top": "0px", 
    "background": "white" 
}); 
$('header').css({"visibility": "hidden"}); 

} else { 
if ($(this).scrollTop() <= 800) { 
    $('nav a').css({ 
     "color": "white" 
    }); 
    $clone.hide(); 
    $('header').css({ 
     "position": "relative", 
     "top": "0px", 
     "background": "none", 
     "visibility": "visible" 
    }); 
} 
}