Twitter Bootstrap - L'affixe apparaît sur l'offset

Question

Comment changer la propriété d'affichage css lorsque vous faites défiler jusqu'au décalage d'affixe?

Je veux un div à apparaître quand je suis à mi-chemin vers le bas de l'écran, mais pas visible jusqu'à ce que je frappe mon OFFSET ...

<div class="article-bar" data-spy="affix" data-offset-top="700"> 
    <div class="row"> 
     <div class="col-lg-8"> 
      <?php include('inc_social.php');?> 
     </div> 
     <div class="col-lg-4"> 
      Next: <?php next_post('%','');?> 
     </div> 
    </div> 
</div> 

.article-bar {width:100%; background-color:#FFF; padding:10px 20px; top:0; z-index:99999; border-bottom:1px solid #CCC; display:none;} 

Answer 1

Got it! N'oubliez pas d'enlever data-offset-top de la div.

<div class="article-bar" data-spy="affix"> 
.... 
</div> 

<script> 
    $(function() { 
     $(window).scroll(function() { 
      if($(window).scrollTop() >= 700) { 
       $('.article-bar').fadeIn('fast'); 
      }else{ 
       $('.article-bar').fadeOut('fast'); 
      } 
     }); 
    }); 
</script> 

Answer 2

Vous pouvez commencer par un élément masqué. Cela fonctionnerait alors:

<div class="article-bar" class="hidden" data-spy="affix"> 
.... 
</div> 

<script> 
    $(function() { 
     $(window).scroll(function() { 
     if($(window).scrollTop() >= 700) { 
      $('.article-bar').removeClass('hidden'); 
      $('.article-bar').fadeIn('fast'); 
     }else{ 
      $('.article-bar').fadeOut('fast'); 
     } 
     }); 
    }); 
</script> 

Answer 3

Voici ma solution juste en utilisant le CSS

Ajouter une classe .hidden à votre élément Set .affix> .hidden à: affichage: important bloc

.article-bar {width:100%; background-color:#FFF; padding:10px 20px; top:0; z-index:99999; border-bottom:1px solid #CCC;} 
 

 
.hidden { 
 
    display: none; 
 
} 
 

 
.affix .hidden { 
 
    display: block !important; 
 
    }

<div class="article-bar" data-spy="affix" data-offset-top="700"> 
 
    <div class="row hidden"> 
 
     <div class="col-lg-8"> 
 
      <?php include('inc_social.php');?> 
 
     </div> 
 
     <div class="col-lg-4"> 
 
      Next: <?php next_post('%','');?> 
 
     </div> 
 
    </div> 
 
</div>

Answer 4

Je l'ai fait. Accordé il affecte tous les articles d'affixe.

<div id="sticky-item"> 
    <a href="#somebookmark">TOP</a> 
</div> 

$('#sticky-item').affix({ 
    offset: 75 
}); 

.affix 
{ 
    left:20px; 
    background-color:white; 
} 

.affix-top 
{ 
    visibility:hidden; 
} 

$('#sticky-item').on('affix.bs.affix', function() { 
     $('#sticky-item').fadeIn('slow'); 
});