X-Git-Url: https://gerrit.onap.org/r/gitweb?a=blobdiff_plain;f=POLICY-SDK-APP%2Fsrc%2Fmain%2Fwebapp%2Fapp%2FpolicyApp%2FCSS%2Fbootstrap%2Fdocs%2F_includes%2Fjs%2Faffix.html;fp=POLICY-SDK-APP%2Fsrc%2Fmain%2Fwebapp%2Fapp%2FpolicyApp%2FCSS%2Fbootstrap%2Fdocs%2F_includes%2Fjs%2Faffix.html;h=5eaed7028333609addf94d72172c384a940fd345;hb=e0addf5b588a1244f9679becd90999dfcb4c3a94;hp=0000000000000000000000000000000000000000;hpb=39fb0f30472777e4b60d6a7ac8aa4eb9773961ff;p=policy%2Fengine.git diff --git a/POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/_includes/js/affix.html b/POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/_includes/js/affix.html new file mode 100644 index 000000000..5eaed7028 --- /dev/null +++ b/POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/_includes/js/affix.html @@ -0,0 +1,115 @@ +
+

Affix affix.js

+ +

Example

+

The affix plugin toggles position: fixed; on and off, emulating the effect found with position: sticky;. The subnavigation on the right is a live demo of the affix plugin.

+ +
+ +

Usage

+

Use the affix plugin via data attributes or manually with your own JavaScript. In both situations, you must provide CSS for the positioning and width of your affixed content.

+ +

Positioning via CSS

+

The affix plugin toggles between three classes, each representing a particular state: .affix, .affix-top, and .affix-bottom. You must provide the styles, with the exception of position: fixed; on .affix, for these classes yourself (independent of this plugin) to handle the actual positions.

+

Here's how the affix plugin works:

+
    +
  1. To start, the plugin adds .affix-top to indicate the element is in its top-most position. At this point no CSS positioning is required.
    2. +
  2. Scrolling past the element you want affixed should trigger the actual affixing. This is where .affix replaces .affix-top and sets position: fixed; (provided by Bootstrap's CSS).
    3. +
  3. If a bottom offset is defined, scrolling past it should replace .affix with .affix-bottom. Since offsets are optional, setting one requires you to set the appropriate CSS. In this case, add position: absolute; when necessary. The plugin uses the data attribute or JavaScript option to determine where to position the element from there.
    4. +
+

Follow the above steps to set your CSS for either of the usage options below.

+ +

Via data attributes

+

To easily add affix behavior to any element, just add data-spy="affix" to the element you want to spy on. Use offsets to define when to toggle the pinning of an element.

+ +{% highlight html %} +
+ ... +
+{% endhighlight %} + +

Via JavaScript

+

Call the affix plugin via JavaScript:

+{% highlight js %} +$('#myAffix').affix({ + offset: { + top: 100, + bottom: function () { + return (this.bottom = $('.footer').outerHeight(true)) + } + } +}) +{% endhighlight %} + + +

Options

+

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset-top="200".

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + +
Nametypedefaultdescription
offsetnumber | function | object10Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and bottom directions. To provide a unique, bottom and top offset just provide an object offset: { top: 10 } or offset: { top: 10, bottom: 5 }. Use a function when you need to dynamically calculate an offset.
targetselector | node | jQuery elementthe window objectSpecifies the target element of the affix.
+
+ + +

Events

+

Bootstrap's affix plugin exposes a few events for hooking into affix functionality.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Event TypeDescription
affix.bs.affixThis event fires immediately before the element has been affixed.
affixed.bs.affixThis event is fired after the element has been affixed.
affix-top.bs.affixThis event fires immediately before the element has been affixed-top.
affixed-top.bs.affixThis event is fired after the element has been affixed-top.
affix-bottom.bs.affixThis event fires immediately before the element has been affixed-bottom.
affixed-bottom.bs.affixThis event is fired after the element has been affixed-bottom.
+
+