滚动时将div粘贴到屏幕顶部

Question

我有一个Jumbotron的Wordpress网站，里面是一个div'sticky'，它的位置是：绝对位于底部。 巨无霸具有固定的高度，我希望div滚动到时可以“粘”在屏幕顶部。

我在该主题上看到了多个线程/示例，但似乎没有一个适合我（大多数不是以适用于Wordpress的格式编写的）

使它在WP中工作的最佳方法是什么（使用function.php等）

的HTML

<div class="row col-md-12">
 <div class="jumbotron">
    <div class="sticky"><p>CURRENT WORK</p></div>
 </div>
</div><!-- /row -->

的CSS

.jumbotron {
  margin: 0;
  width: 100%;
  height: 400px;
  background-color: #fff;
}
.sticky {
  position: absolute;
  bottom: 0; right: 0;
  background-color: red;
  padding: 0 5px;
  width: 200px;
  text-align: center;
}

Answer 1

首先，给.jumbotron一个相对的位置

position: relative;

.sticky一个高度值

height:40px;

您还需要在粘性DIV中添加锚点DIV

<div class="sticky"><div id="anchor"></div><p>CURRENT WORK</p></div>

然后下面的javascript

$(document).ready(function(){       
   var scroll_start = 0;
   var startchange = $('#anchor');
   var offset = startchange.offset();
    if (startchange.length){
   $(document).scroll(function() { 
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
          $('.sticky').css('position', 'fixed');
          $('.sticky').css('top', '0');
          $('.sticky').css('z-index', '10000');
       } 
   });
    }
});

在这里查看： http : //jsfiddle.net/ubLgaktp/

编辑：您可以通过在您的head标签之间放置以下内容来将javascript添加到页面本身

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"</script>
<script>
$(document).ready(function(){       
   var scroll_start = 0;
   var startchange = $('#anchor');
   var offset = startchange.offset();
    if (startchange.length){
   $(document).scroll(function() { 
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
          $('.sticky').css('position', 'fixed');
          $('.sticky').css('top', '0');
          $('.sticky').css('z-index', '10000');
       } 
   });
    }
});
</script>

编辑：

这是一个更好的方法。 使用锚点div将类添加和删除到div中，而不是更改类。 这样，如果观看者向下滚动，粘性div就会变成“未粘住”状态。

这是jsfiddle ...

http://jsfiddle.net/bh40k8Lg/

HTML

<div class="row col-md-12">
 <div class="jumbotron">
    <div id="sticky"><div id="anchor"></div><p>CURRENT WORK</p></div>     
 </div>
</div><!-- /row -->

CSS

.jumbotron {
  margin: 0;
  width: 100%;
  height: 400px;
  background-color: #fff;
  position: relative;
}

#sticky {
  position: absolute;
  bottom: 0; right: 0;
  background-color: red;
  padding: 0 5px;
  width: 200px;
  text-align: center;
    height:40px;
}

.sticky-top {
    position:fixed!important;
    top:0!important;
    z-index:10000!important;
}

您可以在首标之间插入的Javascript

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script>
$(document).ready(function(){       
   var scroll_start = 0;
   var startchange = $('#anchor');
   var offset = startchange.offset();
    if (startchange.length){
   $(document).scroll(function() { 
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
        document.getElementById('sticky').classList.add('sticky-top');
       } else {
        document.getElementById('sticky').classList.remove('sticky-top');
       }
   });
    }
});
</script>