JQuery 스크롤 및 일부 숨겨진 표제

Question

사용자가 페이지를 스크롤하면 고정 위치 헤더가 생성됩니다. 저는 JQuery (Angular를 사용하는 페이지에서)를 사용하고 scrollTop이 250px 이상이되면 즉시 페이드 인하려면 (디스플레이 : 없음을 사용하고 있습니다) 즉시 <50px 일 때 사라집니다.

천천히 내 코드가 작동을 스크롤 할 때까지 스크롤 속도 250 픽셀 마크 위에 다시 나타납니다 숨겨진해야 H1에서 아래로 때 https://jsfiddle.net/gilestaylor/jpaqbm36/

사람이 수정 프로그램을 추천 할 수 있습니까? 아니면 이렇게하는 더 똑똑한 방법? (어떤 조언을 많이 감사합니다, 그래서 난 여전히 밧줄을 배우고!)

HTML 
<header> 
    <h1>Order some food</h1> 
</header> 
<div id="bar"> 
<h1>Order some food</h1> 
</div> 

JS 
$(function() { 
    $(window).scroll(function() { 
    if ($(window).scrollTop() > 250) { 
     $('#bar').css({ 
     'height': '50px' 
     }); 
    $('#bar h1').fadeIn(1000);   
    } 
    else { 
     $('#bar').css({ 
      'height': '0' 
     }); 
     $('#bar h1').css({'display': 'none'}); 
    }; 
    }); 
}); 

Answer 1

fadeIn()에 대한 호출은 시간이 걸립니다. 요소를 숨길 때 및 심지어 .fadeIn()이 다시 호출 될 때도 여전히 애니메이션이 적용될 수 있습니다. 따라서 .stop()을 사용하여 이러한 작업을 수행하기 전에 애니메이션을 중지해야합니다. 또한 .css({'display': 'none'}) 대신 .hide()을 사용하여 요소를 숨길 수 있습니다.

jsfiddle

정말 필요한 경우에만 변경 사항을 확인해야합니다 오른쪽하지만 코드를 확인하십시오. 즉, 표시되지 않을 때만 막대를 표시하도록 코드를 실행하고 표시된 경우에만 코드를 숨기려면 코드를 실행해야합니다.

$(function() { 
    var isBarShown = false; 

    function updateBar() { 
    if ($(window).scrollTop() > 250) { 
     if (!isBarShown) { 
     $('#bar').css({'height': '50px'}).find('h1').fadeIn(1000); 
     isBarShown = true; 
     } 
    } else { 
     if (isBarShown) { 
     isBarShown = false; 
     $('#bar').css({'height': '0'}).find('h1').stop().hide(); 
     } 
    } 
    } 

    $(window).scroll(function() { 
    updateBar(); 
    }); 

    updateBar(); 
}); 

참고 :이 경우에는 .hide()에 개입 호출하지 않고 .fadeIn()에 두 개의 연속 통화가 전혀 없습니다 때문에 .fadeIn()를 호출하기 전에 .stop()를 호출 할 필요는 없습니다.

jsfiddle

Answer 2

대신에 2 개의 다른 헤더를 가진 당신은 하나의 헤더를 가지고 있어야하고 아래로 스크롤 할 때 jQuery를 함께 크기를 조정합니다. 확인이 https://jsfiddle.net/ktriek/jpaqbm36/5/ 모하메드 - 유세프 @

$(function() { 
    $(window).scroll(function() { 
    var header = $('header'); 
    if ($(window).scrollTop() > 250) { 
      header.addClass("smaller");   
     } 
     else { 
       header.removeClass("smaller");  
     }; 
    }); 
});