1：vue将搜索栏定位到轮播图上方
 position: fixed;
 z-index: 999;//控制header部分固定
 
 
 
2：vue触发滚动条事件，获取当前滚动条位置
 
思路：scroll在哪儿个组件内，就在获取那个dom元素。网上好多思路是
 
    window.addEventListener("scroll", function(){
             console.log('scrolling');
           });
 
这是监听不到的！如果你整个网页可以滑动，或许还可以试试！
 
对于像我这样，只在页面的内的一个div内要监听的。实现代码如下：
 第一步：滑动的组件外层的div加 ref="viewBox" 为了通过$refs获取dom元素
 <!--设备列表-->
 <div class="deviceWrapper" ref="viewBox">
   <mu-refresh-control :refreshing="refreshing" :trigger="trigger" @refresh="refresh"/>
   <div class="demo-grid">
     <!--设备列表 手机一行两列 pad一行4列-->
     <mu-row>
       <mu-col v-for="device in devicesList" width="50" tablet="25" desktop="25">
         <deviceCardView :device-data="device""></devicelightCardView>
       </mu-col>
     </mu-row>
   </div>
   <p class="bottomLine" v-bind:class="{bottomLineVisible:isScroll}">---------------------我是有底线的---------------------</p>
 </div>
 第二步：
 mounted() {
 // 通过$refs获取dom元素
   this.box = this.$refs.viewBox
   // 监听这个dom的scroll事件
   this.box.addEventListener('scroll', () => {
     console.log(" scroll " + this.$refs.viewBox.scrollTop)
     //以下是我自己的需求，向下滚动的时候显示“我是有底线的（类似支付宝）”
     this.isScroll=this.$refs.viewBox.scrollTop>0
   }, false)
 }
 ps:具体怎么做，看需求了。只要能打印出来.scrollTop就行了
 ---------------------
 作者：SandyoneU1993
 来源：CSDN
 原文：https://blog.csdn.net/sandyoneu1993/article/details/79421277
 版权声明：本文为博主原创文章，转载请附上博文链接！

获取滚动条当前位置 scrollTop() 方法
 
问题描述
 
ul 列表定时轮播滚动，当滚动到最后一个 li 后，重新回到顶部重新开始自动滚动。
 
测试发现当滚动条目较小时，即 li 的总高度小于设置的滚动最大值，
 轮播到最后一条记录后，轮播滚动效果停止。
 
解决方法
 
判断当前列表播放时当前的高度（height）值和滚动条位置的高度值，如果大于滚动条位置高度值则重新开始。
 
<div style="border:1px solid black;width:200px;height:200px;overflow:auto">
<ul class="ul" id="testList" >
	  <li>This is 1 item. </li>
	  <li>This is 2 item. </li>
	  <li>This is 3 item. </li>
	  <li>This is 4 item. </li>
	  <li>This is 5 item. </li>
	  <li>This is 6 item. </li>
	  <li>This is 7 item. </li>
	  <li>This is 8 item. </li>
	  <li>This is 9 item. </li>
	  <li>This is 10 item. </li>
	</ul>
</div>

<script type="text/javascript">
  $(function(){
    var scrollItemHeight = 0;
    // 滚动条当前位置
    var scrollOffset = 0;
    // li 列表总高度
    var totalLiHeight = ($(".ul li").length)*($(".ul li").eq(0).height()) - 5;
    // 自动滚动效果
    function autoScroll() {
      scrollItemHeight += 20;
      scrollOffset = 20+$(".ul").scrollTop();
      // 如果有拖动滚动条，则从拖动后的位置开始滚动
      if(scrollItemHeight != scrollOffset){
        scrollItemHeight = scrollOffset;
      }
      if(scrollItemHeight > totalLiHeight) {
        scrollItemHeight = 0;
        scrollOffset = 0;
      }
      $(".ul").animate({scrollTop: scrollItemHeight}, 1000); // 1000ms 为列表移动速度
   }
   setInterval("autoScroll", 2000);
});

</script>	
 

 
 
参考：
 jQuery CSS 操作 - scrollTop() 方法

 
前言
 
记录一下获取滚动条相对距离和绝对距离的方法
 
说明(个人理解)
 
相对距离
 
当前滚动条到父滚动条的距离
 
绝对距离
 
当前滚动条到页面顶部的位置
 
实例
 
1.获取当前组件DOM标签滚动条位置
 
// 为保证DOM节点加载完毕，要在 mounted 中实现
 
// 使用 $refs 获取DOM实例，以 tree 为例
 
mounted() {
 
this.$refs.tree.addEventListener('scroll', e => {
 
console.log('父滚动条到页面顶部距离', e.target.offsetTop)
 
console.log('相对距离', this.$refs.tree.scrollTop)
 
console.log('绝对距离', e.target.offsetTop + this.$refs.tree.scrollTop)
 
}, false)
 
}
 
2.获取子组件DOM标签滚动条位置
 
mounted() {
 
this.$refs.tree.$el.addEventListener('scroll', e => {
 
console.log('父滚动条到页面顶部距离', e.target.offsetTop)
 
console.log('相对距离', this.$refs.tree.$el.scrollTop)
 
console.log('绝对距离', e.target.offsetTop + this.$refs.tree.$el.scrollTop)
 
}, false)
 
},
 
总结
 
当使用 $refs 获取DOM实例时，如果加在当前组件DOM节点上，则获取的是DOM实例。如果加在子组件上，则获取的是子组件实例，可以再使用 $el 获取到组件实例对应的DOM实例

假设有一个div#test，滚动高度200px,div内容高度1000px
 
【获取div#test滚动条高度值】
 
document.getElementById('code').scrollHeight;
 
【获取div#test当前滚动值】
 
document.getElementById('code').scrollTop;
 
【设置div#test滚动条高度值】
 
document.getElementById('code').scrollTop=100;