Question

我有一个带有Jumbotron的Wordpress网站，里面是一个div'sticky'，位于：绝对到底部。 jumbotron有一个固定的高度，我希望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/

编辑：您可以通过在头标记之间添加以下内容将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>

编辑：

这是一种更好的方法。使用anchor 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>

滚动

1 个答案: