html页面延迟显示效果,jquery html5页面视差滚动标题固定显示效果代码

特效描述：jquery html5页面视差滚动 标题固定显示效果。html5页面视差滚动

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

Midnight.js lets you switch fixed headers on the fly

Scroll to try it out!

The Header

Create your fixed nav (or header) as you typically would.

You can use whatever markup suits you, just make sure the header works well with position:fixed.

<!-- Your Fixed Nav -->

<nav class="fixed">

<a class="logo">Logo</a>

</nav>

The Sections

After that, take any sections of your page that need a different nav and add data-midnight="your-class" to it, where .your-class is the class you are going to use to style that header.

If you don't use the property or just leave it blank, the .default class will be used for that section.

<section data-midnight="white">

<h1>Use a white nav here</h1>

</section>

<div data-midnight="blue">

<h1>And a blue nav here</h1>

</div>

<footer>

<h1>This will just use the default header</h1>

</footer>

Styling your headers

You can style it in your css using the class .midnightHeader.your-class.

Use whatever CSS or markup you like for each one. They will be switched automatically when necessary.

.midnightHeader.default {

background: none;

color: black;

}

.midnightHeader.white {

background: white;

color: black;

}

.midnightHeader.blue {

background: blue;

color: white;

}

The jQuery Plugin

To make everything work, just load midnight (and jQuery) and initialize it. We take care of the rest.

<script src="midnight.jquery.js"></script>

<script>

// Start midnight

$(document).ready(function(){

// Change this to the correct selector.

$('nav.fixed').midnight();

});

</script>

Further customization

Want to use custom markup for each header?

You just need to add a div with the class .midnightHeader.default inside your header, as well as any other custom headers you want.

For instance the "butterflies" section will use the .midnightHeader.butterflies header, and any other ones will just use the markup from .midnightHeader.default.

<nav class="fixed">

<!-- Your standard header -->

<div class="midnightHeader default">

<a class="logo">Logo</a>

</div>

<!-- A header with butterflies -->

<div class="midnightHeader butterflies">

<a class="logo">Logo</a>

<span class="a-butterfly"></span>

<span class="another-butterfly"></span>

</div>

</nav>

$(document).ready(function(){

// vh fix for iOS7 (Not that it works well on that anyway)

viewportUnitsBuggyfill.init();

$(window).resize(function(){

viewportUnitsBuggyfill.refresh();

});

// Start Midnight!

$('nav.fixed').midnight();

// Start wow.js

new WOW().init();

// The island disappears when the logo moves on top of it

var $island = $('#space-island');

var islandTop = $island.offset().top;

var windowHeight = $(window).height();

$(window).resize(function(){

islandTop = $island.offset().top;

windowHeight = $(window).height();

});

$(document).scroll(function(){

var scrollTop = window.pageYOffset || document.documentElement.scrollTop;

var minScrollTop = islandTop - windowHeight * 0.4;

var maxScrollTop = islandTop;

// Opacity goes from 1.0 at the bottom 2/3 of the screen to 0.4 at the top

if( scrollTop <= islandTop*2 ) {

var targetOpacity = 1.0;

var minOpacity = 0.4;

if( scrollTop > minScrollTop && scrollTop < maxScrollTop ) {

targetOpacity = ((maxScrollTop - scrollTop) / (maxScrollTop - minScrollTop)) * (1.0 - minOpacity) + minOpacity;

}

else if( scrollTop > maxScrollTop ) {

targetOpacity = minOpacity;

}

else if( scrollTop < minScrollTop ) {

targetOpacity = 1.0;

}

$island.css('opacity', targetOpacity);

}

});

$('.scroll-prompt').click(function(event){

event.preventDefault();

$('html, body').animate({

scrollTop: $("section.step-one").offset().top - $('nav').height() * 0.5

}, 1000, 'swing');

});

$(window).trigger('resize');

});