페이지가 스크롤 될 때 고정 된 머리글 변환

Question

내 그림의 수명을 연장 할 수는 없습니다. 이 스크롤 효과가이 웹 사이트에서 어떻게 생성되는지 아는 사람 있습니까? - http://blindbarber.com/news

이 효과가 크게 도움이되는 스크롤 작업을 할 때 내 고정 탐색 기능이 너무 커서 도움이되는 프로젝트를 진행 중입니다.

미리 감사드립니다.

Answer 1

헤더는 CSS를 position:fixed 상단에 남아 ... 하나는 헤더 CSS를 설정할 수 있습니다 - 처음부터 바로 position:fixed 또는 그 페이지를 스크롤 시작하면 position:fixed로 변경 .. 및 내용에 헤더를 업데이트하면 그는 스크롤로 유지하려면 ...

// css 
.container { 
    height: 2000px; 
    width: 100%; 
    background-color: yellow; 
} 

.header { 
    text-align: center; 
    background-color: red; 
    height: 100px; 
    min-height: 50px; 
    width: 100%; 
} 

// js 

window.onscroll= function() { 
    var top = window.pageXOffset ? window.pageXOffset : document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop; 
    var header = document.getElementById("header"); 
    if (top > 50){ 
    header.style.position = "fixed"; 
    header.style.height = "50px"; 
    } else { 
    header.style.position = "relative"; 
    header.style.height = "100px"; 
    } 
} 

//html 
<div class="container"> 
    <div id="header" class="header"> 
    Hello World 
    </div> 
</div> 

데모 here

Answer 2

이것은 내 생각에 대한 귀하의보고 무엇을 :

http://www.backslash.gr/content/blog/webdevelopment/6-navigation-menu-that-stays-on-top-with-jquery

그래서 Google 검색 용어는 응답 형 메뉴 + 자바 스크립트입니다.

제 경우 jquery 플러그인을 찾고 있으므로 "jquery"를 추가했습니다. 사실 올바른 정확하지하지 것에 대해 "고정 된 헤더 변환"

: