滚动监听

滚动监听为当对象在滚动时，执行对应的事件；通常的做法为当对象滚动到一定位置时，改变目标对象的样式行为。

基本样式

滚动监听需要指定滚动的元素relative，滚动目标对象target及触发对象toggle；relative当不指定时，默认为窗口；toggle触发对象可为空。

    <ul class="nav nav-tabs bg-white" id="scroll-nav">
      <li class="active"><a href="javascript:;">一</a></li>
      <li><a href="javascript:;">二</a></li>
      <li><a href="javascript:;">三</a></li>
      <li><a href="javascript:;">四</a></li>
    </ul>
    <div id="scroll">
      <div class="alert-success">一</div>
      <div class="alert-info">二</div>
      <div class="alert-danger">三</div>
      <div class="alert-warning">四</div>
    </div>
    <style>
      body{padding-top:46px;}
      #scroll-nav{position:fixed;top:0;left:0;right:0;}
      #scroll>div{margin-top:1rem;border-radius:.25rem;display:flex;height:350px;align-items:center;justify-content:center;}
      #scroll>div.active{background:#0a8 !important;color:#fff;}
    </style>

调用方法

    <script>
      $(function(){
        $().scroll({
          "toggle":"#scroll-nav>li",
          "target":"#scroll>div",
        });
      });
    </script>

示例为当目标对象滚动到顶部时，目标对象及触发对象均添加样式.active；添加的样式也可以通过target_class及toggle_class自定义。

参数说明

参数	类型	默认值	参数值	说明
target	object	/	/	目标的对象，即滚动后监听的对象
target_class	class	active	/	目标的对象滚动到相应位置后添加的样式类
toggle	object	/	/	触发对象，通常为导航，可为空。
toggle_class	class	active	/	目标的对象滚动到相应位置后触发对象添加的样式类
fixed	bool	false	true:固定 false:滚动	效果为滚动还是固定
offset	number	0	/	偏离值，为相对于滚动元素的相对位置的距离。
bottom	bool	false	false:相对顶部滚动 true:相对底部滚动	相对底部滚动
full	bool	false	false:非全屏显示 true:全屏显示	全屏显示
loop	bool	false	false:对象样式来回加载 true:对象样式只加载一次	样式循环
delay	number	15	/	目标对象延时显示时间

相对位置

除相对于滚动元素的顶部外，当bottom为true时也可以相对于底部，同时也可设置偏移值offset。

一

二

三

四

    <ul class="nav nav-tabs" id="bottom-nav">
      <li class="active"><a href="javascript:;">一</a></li>
      <li><a href="javascript:;">二</a></li>
      <li><a href="javascript:;">三</a></li>
      <li><a href="javascript:;">四</a></li>
    </ul>
    <div id="bottom" style="height:300px;overflow:auto;">
      <div class="alert-success">一</div>
      <div class="alert-info">二</div>
      <div class="alert-danger">三</div>
      <div class="alert-warning">四</div>
    </div>
    <style>
      #bottom>div{margin-top:1rem;padding-top:1rem;border-radius:.25rem;display:flex;height:350px;justify-content:center;}
      #bottom>div.active{background:#0a8 !important;color:#fff;}
    </style>
    <script>
      $(function(){
        $("#bottom").scroll({
          "toggle":"#bottom-nav>li",
          "target":"#bottom>div",
          "bottom":true,
          "offset":60,
          "full":true,
        });
      });
    </script>

当full为true时，滚动目标的宽放与滚动窗口相同。

固定位置

当设置fixed为true时，可将元素固定的指定位置。

固定顶部

    <div style="height:200px;">请向下滚动</div>
    <div class="bg-main bg-inverse padding radius" align="cetner">固定到顶部1</div>
    <div style="height:200px;"></div>
    <div class="bg-sub bg-inverse padding radius" align="cetner">固定到顶部2</div>
    <div style="height:600px;"></div>
    <style>
      .bg-inverse.active{position:fixed;width:100%;top:0;}
    </style>
    <script>
      $(function(){
        $().scroll({
          "target":".bg-inverse",
          "fixed":true,
          "loop":true,
        });
      });
    </script>

固定底部

    <div style="height:360px;">请向下滚动</div>
    <div class="bg-main bg-inverse padding radius" align="cetner">固定到底部1</div>
    <div style="height:200px;"></div>
    <div class="bg-sub bg-inverse padding radius" align="cetner">固定到底部2</div>
    <div style="height:300px;"></div>
    <style>
      .bg-inverse.active{position:fixed;width:100%;bottom:0;}
    </style>
    <script>
      $(function(){
        $().scroll({
          "target":".bg-inverse",
          "fixed":true,
          "bottom":true,
          "loop":true,
        });
      });
    </script>

延时显示

默认间隔延时为delay为15ms，也可根据应用需要调整其值。

    <div id="show" style="height:300px;overflow:auto;">
      <div class="grid-small">
        <div class="grid">
          <div class="x4"><img src="..." class="img-auto" alt="图片" /></div>
          ...
          <div class="x4"><img src="..." class="img-auto" alt="图片" /></div>
        </div>
      </div>
    </div>
    <style>
      #show>div>.grid>div.x4{opacity:0;}
      #show>div>.grid>div.x4.active{opacity:1;}
    </style>
    <script>
      $(function(){
        $("#show").scroll({
          "target":"#show>div>.grid>.x4",
          "bottom":true,
          "offset":50,
          "loop":true,
          "delay":10,
        });
      });
    </script>