JQuery Scrolling und einige nicht so verdeckte Überschriften

Question

Ich versuche, eine feste Position Header zu erstellen, der angezeigt wird, sobald der Benutzer durch die Seite scrollt. Ich benutze JQuery (auf einer Seite, die auch Angular verwendet) und wollte fadeIn, sobald der scrollTop> 250px ist und sofort verschwindet (ich habe display: none verwendet), sobald es < 250px ist.

Beim Scrollen meines Code funktioniert langsam aber beim Scrollen nach oben und unten die h1 bei der Geschwindigkeit, die erscheint wieder über das 250px Zeichen versteckt werden soll: https://jsfiddle.net/gilestaylor/jpaqbm36/

Kann jemand ein Update empfehlen? Oder eine klügere Art, dies zu tun? (Ich lerne immer noch die Seile so irgendwelche Tipps zu schätzen!)

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

Der Aufruf von fadeIn() Zeit in Anspruch nimmt. Es kann immer noch animiert werden, wenn Sie das Element ausblenden und selbst wenn .fadeIn() erneut aufgerufen wird. Daher sollten Sie .stop() verwenden, um die Animation zu beenden, bevor Sie eines dieser Dinge ausführen. Sie können auch verwenden, um das Element statt .css({'display': 'none'}) auszublenden.

jsfiddle

wirklich Um den Code richtig machen aber Sie sollten nur die Änderung vornehmen, wenn nötig. Das heißt, Sie sollten den Code ausführen, um die Leiste nur anzuzeigen, wenn sie nicht angezeigt wird, und den Code ausführen, um ihn nur zu verbergen, wenn er angezeigt wird.

$(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(); 
}); 

Hinweis: In diesem Fall ist es nicht notwendig, .stop() aufrufen, bevor .fadeIn() Aufruf, denn es wird nie ohne einen dazwischenliegenden Anruf zu .hide()-.fadeIn() zwei aufeinanderfolgenden Anrufe sein.

jsfiddle

Answer 2

Stattdessen 2 verschiedene Header haben, sollten Sie nur einen Header haben und es mit jQuery die Größe, wenn Sie nach unten scrollen. diese Check https://jsfiddle.net/ktriek/jpaqbm36/5/

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