71 votes

L'obtention d'un collant en-tête de "push up", comme dans Instagram est une application iPhone à l'aide de CSS et de jQuery

L'Instagram app a un joli collant en-tête qui pousse le courant jusqu'à la place de la nouvelle. J'ai trouvé un tutoriel sur la façon de le faire en natif pour Android, mais je suis à la recherche de le faire avec du JavaScript et du CSS.

J'ai pu obtenir mon en-tête de passer pour un nouveau, mais je n'arrive pas à trouver un moyen de reproduire la façon Instagram t-il. Toute aide est grandement appréciée.

*Edit: j'ai été en mesure d'obtenir l'en-tête de bâton vers le haut de la page lorsque vous faites défiler à l'aide des waypoints comme Cj dans les commentaires souligné. (lien vers waypoints). La principale question que je vais avoir c'est d'obtenir le "push up" effet que instagram utilise dans son application mobile pour iPhone. Je voudrais un lien pour un exemple, mais je ne l'ai jamais vu utilisé avant.*

**Edit 2: en Utilisant des pièces de la codepen que @Chris a apporté, j'ai été en mesure d'obtenir les en-têtes de bâton. J'ai ensuite ajouté un .slideUp effet. Mon problème maintenant est d'obtenir l' .slideUp effet de se produire seulement lorsque l'en-tête suivant est atteint. Droit maintenant, l'effet s'active sur parchemin.

Voici le code:

(function() {
function stickyTitles(stickies) {
    this.load = function() {
        stickies.each(function(){
            var thisSticky = jQuery(this);
            jQuery.data(thisSticky[0], 'pos', thisSticky.offset().top);
        });
    }
    this.scroll = function() {      
        stickies.each(function(){           
            var thisSticky = jQuery(this),          
                pos = jQuery.data(thisSticky[0], 'pos');
            if (pos <= jQuery(window).scrollTop()) {
                thisSticky.addClass("fixed");
                // added this 
                 $(".followMeBar:parent").slideUp();

            } else {
                thisSticky.removeClass("fixed");
            }
        });         
    }
}
jQuery(document).ready(function(){
    var newStickies = new stickyTitles(jQuery(".followMeBar"));
    newStickies.load();
    jQuery(window).on("scroll", function() {
        newStickies.scroll();

    }); 
});

})();

133voto

Chris Spittles Points 2466

Est-ce ce que vous recherchez?

Code Stylo Exemple

function stickyTitles(stickies) {

	this.load = function() {
		
		stickies.each(function(){
			
			var thisSticky = jQuery(this).wrap('<div class="followWrap" />');
			thisSticky.parent().height(thisSticky.outerHeight());
			
			jQuery.data(thisSticky[0], 'pos', thisSticky.offset().top);
			
		});
	}
		
	this.scroll = function() {
	
		stickies.each(function(i){
			
			
			var thisSticky = jQuery(this),
				nextSticky = stickies.eq(i+1),
				prevSticky = stickies.eq(i-1),
				pos = jQuery.data(thisSticky[0], 'pos');
		
			if (pos <= jQuery(window).scrollTop()) {
				
				thisSticky.addClass("fixed");
				
				if (nextSticky.length > 0 && thisSticky.offset().top >= jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight()) {
					
					thisSticky.addClass("absolute").css("top", jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight());

				}
				
			} else {
				
				thisSticky.removeClass("fixed");
				
				if (prevSticky.length > 0 && jQuery(window).scrollTop() <= jQuery.data(thisSticky[0], 'pos')  - prevSticky.outerHeight()) {
				
					prevSticky.removeClass("absolute").removeAttr("style");
				
				}				
			}
		});			
	}
}

jQuery(document).ready(function(){

	var newStickies = new stickyTitles(jQuery(".followMeBar"));
	
	newStickies.load();
		
	jQuery(window).on("scroll", function() {

		newStickies.scroll();
	
	});	
});
body {
  margin: 0;
  background: #333;
  color: #fff;
}
.followMeBar {
  background: #222;
  border-bottom: solid 1px #111;
  border-top: solid 1px #444;
  padding: 1%;
  position: relative;
  z-index: 1;
}
.followMeBar.fixed {
  position: fixed;
  top: 0;
  width: 98%;
  z-index: 0;
}
.followMeBar.fixed.absolute {
  position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="followMeBar">a</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">b</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">c</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">d</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">e</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">f</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">g</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">h</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">i</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">j</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">k</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">l</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">m</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">n</div>

1voto

user2668414 Points 16

J'ai eu de la difficulté à obtenir de Chris réponse pour travailler avec précision pour moi, comme tous les post-its à l'intérieur d'un positionnée relativement div (avec un en-tête au-dessus de tout, en dehors de la relative div) - la réponse à cela est juste le stockage de l' .offset().haut de la div conteneur en var et en soustrayant de la .css('top', valeur) dans le script. Comme dans de chris version, la valeur supérieure de l'est de pousser hors de la partie supérieure du document, qui fonctionne très bien. Lorsque vous ajoutez dans le rapport de la div, le dessus est en train de pousser du haut de ce lieu, de sorte que tout l'espace au-dessus de la relative div est inclus dans la valeur qui est quelque chose que vous ne le voudriez pas. Espérons que cela aide quelqu'un d'autre. James

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X