twitter-bootstrap - Twitter Bootstrap - 词缀出现在偏移量上

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 中删除 data-offset-top。

 <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 to: display:block !important

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