stickyNavbar.js - GitLite

KO | EN

gitlite — search

#python #react #ai #typescript #llm #machine-learning #linux #nodejs #macos #cli #ios #mcp #openai #open-source

stickyNavbar.js

(★ 282)

stickyNavbar.js: Fancy sticky navigation jQuery plugin with smart anchor link highlighting

파일 탐색기

최종 버전 다운로드 (.zip)

animate.min.css
bower.json
font-awesome.min.css
jquery.easing.min.js
jquery.stickyNavbar.js
jquery.stickyNavbar.min.js
LICENSE
package-lock.json
package.json
README.md
stickyNavbar.js.jquery.json
wow.min.js

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/jbutko/stickyNavbar.js

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd stickyNavbar.js

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

<script src="//cdn.jsdelivr.net/npm/stickyNavbar.js@1.3.3/jquery.stickyNavbar.min.js"></script>

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# stickyNavbar.js
stickyNavbar.js: Fancy sticky navigation jQuery plugin with smart anchor links highlighting

# Maintainers Wanted

Because I no longer have time to support and maintain this plugin I am looking for developer who would like to take over this project and add new functionality, solve issues etc. You can contact me through my twitter account: [@jozefbutko](https://twitter.com/jozefbutko)

## 1. Setup
Include reference to jQuery library, jQuery easing plugin (optional), animate.CSS (optional, not working in < IE9) and stickyNavbar itself at the bottom of the page before the closing `body` tag:

```html

<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.0.0/animate.min.css" rel="stylesheet" type="text/css">

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/stickyNavbar.js@1.3.3/jquery.stickyNavbar.min.js"></script>
```

## 2. HTML Markup

Navigation:
```html
<div id="header" class="header">
	 <nav id="nav">
			 <ul class="nav navbar-nav">
					 <li>
						 <a href="#home">Home</a>
					 </li>
					 <li>
						 <a href="#about">About</a>
					 </li>
					 <li>
						 <a href="#services">Services</a>
					 </li>
					 <li>
						 <a href="#contact">Contact</a>
					 </li>
			 </ul>
	 </nav>
</div>
```

Body markup:
```html
<div id="home" class="scrollto">
		
</div>
<div id="about" class="scrollto">
		
</div>
<div id="services" class="scrollto">
		
</div>
<div id="contact" class="scrollto">
		
</div>
```

## 3. CSS:
Add `active` class into your `style.css` and style it as you like, eg.:
```css
.active {
		color: #fff !important;
		text-decoration: underline !important;
		-webkit-transform: translate3d(0, 0, 0);
		-moz-transform: translate3d(0, 0, 0);
		-o-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0); // hardware acceleration of CSS animation
}
```
*Note:* You can change `active` class to anything you want and pass your own class into options object of stickyNavbar function.
Be sure to add `top: 0` to `.sticky` class if you want your page to be scrolled on top after each page refresh and not to vertical position presents before page refresh.

## 4. jQuery:
Call stickyNavbar function on the navigation wrapper (`.header`), nav tag or ul tag either without options object:
```javascript
$(function () {
	 $('.header').stickyNavbar();
});
```

or with the options object:
```javascript
$(function () {
	$('.header').stickyNavbar({
		activeClass: "active", // Class to be added to highlight nav elements
		sectionSelector: "scrollto", // Class of the section that is interconnected with nav links
		animDuration: 350, // Duration of jQuery animation as well as jQuery scrolling duration
		startAt: 0, // Stick the menu at XXXpx from the top of the this() (nav container)
		easing: "swing", // Easing type if jqueryEffects = true, use jQuery Easing plugin to extend easing types - gsgd.co.uk/sandbox/jquery/easing
		animateCSS: true, // AnimateCSS effect on/off
		animateCSSRepeat: false, // Repeat animation everytime user scrolls
		cssAnimation: "fadeInDown", // AnimateCSS class that will be added to selector
		jqueryEffects: false, // jQuery animation on/off
		jqueryAnim: "slideDown", // jQuery animation type: fadeIn, show or slideDown
		selector: "a", // Selector to which activeClass will be added, either "a" or "li"
		mobile: false, // If false, nav will not stick under viewport width of 480px (default) or user defined mobileWidth
		mobileWidth: 480, // The viewport width (without scrollbar) under which stickyNavbar will not be applied (due user usability on mobile)
		zindex: 9999, // The zindex value to apply to the element: default 9999, other option is "auto"
		stickyModeClass: "sticky", // Class that will be applied to 'this' in sticky mode
		unstickyModeClass: "unsticky" // Class that will be applied to 'this' in non-sticky mode
	});
});
```

## 5. Demo
https://www.jozefbutko.com/stickynavbar/ or if you want to play with options: http://jsbin.com/wuluj/4/edit

## 6. Credits
[jQuery](http://api.jquery.com/)<br>
[Animate.CSS](http://daneden.github.io/animate.css/)<br>
[jQuery Easing Plugin](http://gsgd.co.uk/sandbox/jquery/easing/)

## Contact
Copyright (C) 2014-2019 Jozef Butko<br>
[www.jozefbutko.com](https://www.jozefbutko.com)<br>
[www.github.com/jbutko](https://www.github.com/jbutko)<br>
[@jozefbutko](https://www.twitter.com/jozefbutko)

## Changelog
### 1.3.5
- missing single quote fix
15/01/2019

### 1.3.4
- support for relative links in navigation links
20/10/2016

### 1.3.3
- menuItemsHref incorrect selector causes errors - pull request #45 by @dimaip<br>
14/04/2016

### 1.3.2
- add support for relative links<br>
04/10/2015

### 1.3.1
- set keyboard focus improvement - pull request #28 by @theopolisme<br>
- bigger resolutions check by @gyduxa<br>
19/07/2015

### 1.3.0
- set keyboard focus to selected section after navigation - pull request #26 by @jacktonkin<br>
- allow relative links - pull request #25 by @stebru<br>
06/06/2015

### 1.2.2
- Improve highlighting of last menu item - pull request #24 by marspe<br>
15/05/2015

### 1.2.1
- added npm package.json<br>
24/03/2015

### 1.2.0
- new scrolling logic<br>
- fix: conditional checking if the selector option is an 'li' then get the child's href attribute - pull request #21 by @dbrw<br>
21/03/2015

### 1.1.3
- scrolling bug fix<br>
20/09/2014

### 1.1.2
- ignore external links and just let them open fix - pull request #15 by @Globegitter<br>
25/07/2014

### 1.1.1
- just a readme file update<br>
23/07/2014

### 1.1.0
- stickyMode/unstickyMode class added
- custom mobileWidth for turning off stickyNavbar
- window.outerWidth(true) changed to window.width() according to jQuery docs
- optional z-index setting
- added animation duration and easing for scrolling
- bottomAnimation option removed (unstable behaviour)
- navOffset option removed (unstable behaviour)
- credits for feature requests/points: @Phyxion, @oniric85, @coolboy4598<br>
23/07/2014

### 1.0.5
- animateCSSRepeat Fix<br>
- Inaccurate scrolling fix<br>
22.05.2014

### 1.0.4
- Fix of the overlapped content by nav container after first click<br>
- Version number fix to 1.0.4<br>
10.04.2013

### 1.0.3
- Flickering of CSS animation fix<br>
13.03.2014<br>

### 1.0.2
- Manifest update<br>
09.03.2014

### 1.0.1
- stickyNavbar.js.jquery.json update<br>
09.03.2014

### 1.0.0
- stickyNavbar.js.jquery.json update<br>
09.03.2014