아래로 밀어서 머리를 고친다

나는 여기 앉아서 자기 자신의 작은 웹 사이트를 만들고있다. 첫 반응 형 레이아웃의 경우 200 픽셀 스크롤 한 후 내 머리글을 아래로 내리고 수정하려고합니다.아래로 밀어서 머리를 고친다

$(window).scroll(function(){ 
    var header = $('header'), 
     scroll = $(window).scrollTop(); 

    if (scroll >= 200) header.addClass('fixed'); 
    else header.removeClass('fixed'); 
});

200 픽셀 후 헤더를 고정 :

나는 여기에이 코드가 있습니다. 그러나이 솔루션은 조금 어렵습니다. 당신이 나를 도울 수 있기를 바랍니다. 지원 주셔서 감사합니다.

출처

2016-07-20 Marcel Funk

'이 솔루션은 조금 어렵습니다'? 작동합니까? 그것을 구현하는 방법을 모른다는 뜻입니까? –

나는 헤더가 직접 나타나서 페이드 인하거나 슬라이드하지 않는다는 것을 의미합니다. 영어로 설명하기가 어렵습니다. 죄송합니다 :-( –

클래스를 헤더 객체에 추가하는 것을 잊어 버린 것 같습니다. 당신이 클래스 = '헤더'로 사업부가있는 경우, 다음 변수 선언은 다음과 같아야합니다

여기

var header = $('.header'),

작업이 코드의 예와 link to a jsfiddle입니다.

출처

2016-07-20 01:00:01

좋은 캐치 - 내 대답 +1에 그리워 +1 – gibberish

아니, 내가 사용하고 있습니다이 올바른지 그리고 당신의 솔루션은 내처럼 보입니다. 일부 스크롤 후 귀하의 경우. 헤더가 나타납니다. 그리고 내 문제가 있습니다. 스크롤 및 고정 된 200px 후 머리글 oder .header 위쪽에서 아래로 슬라이드. –

그래서, 애니메이션을 원하는 머리글을 슬라이드 및 다음 수정하려면? –

이렇게하면 시작할 수 있습니다. 부울 변수를 추가하여 클래스가 추가/제거되는 횟수를 제한합니다.

//javascript: 
//Define variables outside the scroll function 
var win = $(window), header = $('header'), isDown = false; 

win.scroll(function(){ 
    //This function fires thousands of times, so limit that 
    scrollpos = win.scrollTop(); 
    if (!isDown && scrollpos >= 200){ 
    header.addClass('fixed'); 
    isDown = true; 
    }else if (isDown && scrollpos < 200) 
    header.removeClass('fixed'); 
    isDown = false; 
    } 
}); //END window.scroll 


<!-- HTML --> 
<!-- Remember to add the jQuery library (just above `</body>` in document) --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

출처

2016-07-20 01:05:29 gibberish

안녕하세요, 도움 주셔서 감사하지만이 사람들은 나던합니다! –

'작동하지 않습니다'라고 말하지 마십시오. 좋은 디버깅이 아닙니다. 그것은 무엇을 하는가? –

당신은 맞습니다. 팀, 그다지 도움이되지 않습니다. 하지만 나는 아무것도 볼 수 없습니다. 내 에 코드를 추가하고 아래로 스크롤 할 때 고정 헤더 나 다른 것이 없습니다. –

아래로 밀어서 머리를 고친다

답변

관련 문제