# jquery.fixed-header

> Add jquery function for fixed header and depended objects

Latest version **1.2.2** (published 2020-09-15) · 0 weekly downloads

## Install

```sh
npm install jquery.fixed-header
pnpm add jquery.fixed-header
yarn add jquery.fixed-header
bun add jquery.fixed-header
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.2 |
| Published | 2020-09-15 |
| First published | 2018-08-18 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 21.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Patrick Kahl |
| Maintainers | andreasisaak, patrickkahl, felixbuenemann |

## Links

- npm: https://www.npmjs.com/package/jquery.fixed-header
- Repository: https://github.com/LOUISINTERNET/jquery-fixed-header
- Homepage: https://github.com/LOUISINTERNET/jquery-fixed-header#readme
- Issues: https://github.com/LOUISINTERNET/jquery-fixed-header/issues
- npm.io page: https://npm.io/package/jquery.fixed-header

## Dependencies (1)

- [jquery](https://npm.io/package/jquery.md) >=1.5.1

## Recent versions

- 1.2.2 (latest) — 2020-09-15
- 1.2.1 — 2018-08-18

## README

# jquery.fixed-header.js

> jQuery script to add fixed header functionality

*Requires [Node.js](https://nodejs.org) 4+

## Usage

Include the script in your page.

```html
<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.

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

### Options

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

```javascript
$('.header').fixed({
  toAnchor: 'scroll',
  onLoadAnchor: 'jump',
  onChangeAnchor: 'jump',
  offset: 50,
  class: 'header--fixed',
  objects: {}
});
```

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

---
_Source: https://npm.io/package/jquery.fixed-header · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._