zoukankan      html  css  js  c++  java
  • jQuery Scroll Follow

    Overview

    Scroll Follow is a simple jQuery plugin that enables a DOM object to follow the page as the user scrolls. Scroll Follow has been successfully tested on IE6, IE7, FF2, FF3, Safari 3, and Opera 9 on Windows. It has been successfully tested on FF3 and Safari 3 on MacOSX.

    Requirements

    Optional

    Installation

    1. Include jQuery:
      1. <script type="text/javascript" src="jquery.js"></script>
      <!-- end .code-->
    2. Include required plugins, including Scroll Follow:
      1. <script type="text/javascript" src="ui.core.js"></script>
      2. <script type="text/javascript" src="jquery.scrollFollow.js"></script>
      <!-- end .code-->
    3. Call Scroll Follow on the desired DOM object: 
      View Example
      1. <script type="text/javascript">
      2.   $( '#example' ).scrollFollow();
      3. </script>
      <!-- end .code-->
    4. Or call Scroll Follow on the desired DOM object and give it some parameters: 
      View Example
      1. <script type="text/javascript">
      2.  $( document ).ready( function () {
      3.    $( '#example' ).scrollFollow( {
      4.     speed: 1000,
      5.     offset: 60,
      6.     killSwitch: 'exampleLink',
      7.     onText: 'Disable Follow',
      8.     offText: 'Enable Follow'
      9.    } );
      10.  } );
      11. </script>
      <!-- end .code-->
    5. The Scroll Follow object will remain inside its immediate container. 
      View Example
    6. Or you can specify a parent (by ID) for the Scroll Follow object to consider its container: 
      View Example
      1. <script type="text/javascript">
      2.  $( document ).ready( function () {
      3.   $( '#example' ).scrollFollow( {
      4.    container: 'outer'
      5.   } );
      6.  } );
      7. </script>
      <!-- end .code-->
    7. Scroll Follow uses the "top" property of an object to slide it. Therefore, the "position" of the object must be set to either "relative" or "absolute." Other than that limitation, the Scroll Follow object should be completely configured through CSS.

    Parameters

    • speedint - default: 500 
    The duration of the sliding animation (in milliseconds). The smaller the value, the faster the animation.• easingstring - default: 'linear' 
    If included, use any one of the easing options from the easing plugin . Uses 'linear' by default which provides no easing.• offsetint - default: 0 
    Number of pixels the Scroll Follow object should remain from top of viewport.• containerstring - default: object's immediate parent 
    ID of the containing div.• killSwitchstring - default: 'killSwitch' 
    ID of the On/Off toggle element. Requires the jQuery Cookie plugin .• onTextstring - default: 'Turn Slide Off' 
    killSwitch text to be displayed if sliding is enabled.• offTextstring - default: 'Turn Slide On' 
    killSwitch text to be displayed if sliding is disabled.• relativeTostring - default: 'top' 
    Scroll animation can be relative to either the 'top' or 'bottom' of the viewport.• delayint - default: 0 
    Time between the end of the scroll and the beginning of the animation in milliseconds.

  • 相关阅读:
    BZOJ 2301 [HAOI2011]Problem b ——莫比乌斯反演
    VIJOS 1889 天真的因数分解 ——莫比乌斯函数
    BZOJ 2440 [中山市选2011]完全平方数 ——莫比乌斯函数
    BZOJ 3939 [Usaco2015 Feb]Cow Hopscotch ——线段树 CDQ分治
    UOJ 274 【清华集训2016】温暖会指引我们前行 ——Link-Cut Tree
    BZOJ 2246 [SDOI2011]迷宫探险 ——动态规划
    BZOJ 2037 [Sdoi2008]Sue的小球
    BZOJ 3227 [Sdoi2008]红黑树(tree) ——贪心 动态规划
    BZOJ 1974 [Sdoi2010]auction 代码拍卖会 ——动态规划
    sql注入
  • 原文地址:https://www.cnblogs.com/turbo12138/p/5704479.html
Copyright © 2011-2022 走看看