Menu
  1. World
    • All
    • World
      More
    1. Lifestyle
      • All
      • Arts
      • Fashion
      • Health
      • Photography
      • Recipes
      • Travel
      • Cars
      • Business
        More

        No content

        A problem occurred while loading content.

        Previous Next
      1. Fashion
        Previous Next
      2. Sport
      3. Music

        No content

        A problem occurred while loading content.

        Previous Next
      4. Events
        Previous Next
      5. Forum
      6. Maps
      7. Features
      User Menu Search
      Close

      AFFIX

      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 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. 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 code CSS).
      3. If a bottom offset is defined, scrolling past that 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.

      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.

      <div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
        ...
      </div>

      Via JavaScript

      Call the affix plugin via JavaScript:

      $('#my-affix').affix({
          offset: {
            top: 100
          , bottom: function () {
              return (this.bottom = $('.footer').outerHeight(true))
            }
          }
        })

      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".

      Name type default description
      offset number | function | object 10 Pixels 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.
      target selector | node | jQuery element the window object Specifies the target element of the affix.

      Events

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

      Event Type Description
      affix.bs.affix This event fires immediately before the element has been affixed.
      affixed.bs.affix This event is fired after the element has been affixed.
      affix-top.bs.affix This event fires immediately before the element has been affixed-top.
      affixed-top.bs.affix This event is fired after the element has been affixed-top.
      affix-bottom.bs.affix This event fires immediately before the element has been affixed-bottom.
      affixed-bottom.bs.affix This event is fired after the element has been affixed-bottom.

      FOLLOW US

      Terms Of UsePrivacy StatementCopyright 2024 NewsMagazine DNN/DotNetNuke/EVOQ theme Demo by EasyDNNsolutions.com
      Back To Top