Giter VIP home page Giter VIP logo

jquery-fixed-header's Introduction

jquery.fixed-header.js

jQuery script to add fixed header functionality

*Requires Node.js 4+

Usage

Include the script in your page.

<script src="node_modules/jquery.fixed-header/jquery.fixed-header.js"></script>

Now you can activate the script by simply add the call to your header.

$('.header').fixed();

Options

There are also some options that can be set. Simply add an object to the function call.

$('.header').fixed({
  toAnchor: 'scroll',
  onLoadAnchor: 'jump',
  onChangeAnchor: 'jump',
  offset: 50,
  class: 'header--fixed',
  objects: {}
});
type default possible description
toAnchor string scroll scroll, jump, '' Define action on anchor click. For example `scroll` scrolls to the new anchor position with the fixed header.
onLoadAnchor string jump scroll, jump, '' Define action on page load with anchor in url. For example `jump` jumps immediately to the anchor.
onChangeAnchor string jump scroll, jump, '' Define action url change with anchor. For example `jump` jumps immediately to the anchor.
offset number 50 Any number from zero Set the offset from when the fixed header should be triggert.
class string header--fixed All strings with css convention Set the offset from when the fixed header should be triggert.
objects objects {} Add additional elements to set classes if header is fixed
Example: ```javascript objects: [ { object: $('.logo'), class: 'logo--fixed' } ] ```

jquery-fixed-header's People

Contributors

kahl-dev avatar andreasisaak avatar

Watchers

 avatar James Cloos avatar Felix Bünemann avatar  avatar Detzler avatar Johann Haaf avatar Jan-Philipp Dombrowski avatar Ingo Hollmann avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.