Twitter Bootstrap - Affix появляется на смещение

Question

Как изменить свойство отображения css при прокрутке до смещения аффикса?

Я хочу DIV появляться, когда я на полпути вниз по экрану, но не видно, пока я не достиг моего смещения ...

<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

Понял! Не забудьте удалить данные-офсет-верх из 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

Возможно, вы захотите начать со скрытого элемента. Эта работа будет тогда:

<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

Вот мое решение только с помощью CSS

Добавить .hidden класс в элемент Set .affix> .hidden на: дисплей: блок важно

.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

Я сделал это. Предоставлено это влияет на все элементы аффикса.

<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'); 
});