section-scroll.js|可生成垂直整页滚动导航的jQuery插件

WHAT IS THIS?

SECTION SCROLL is a jquery plugin for automatically making scrollable section navigation.

HTML

INCLUDE

<!-- -----Styles----- -->
<link rel="stylesheet" type="text/css" href="css/section-scroll.css">


<!-- -----Scripts----- -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js">


<!-- This is optional, if you want to use easings then please include jquery.easing.1.3.js. See options -->
<!-- Get it here (Please buy him a beer)  http://gsgd.co.uk/sandbox/jquery/easing/ -->
<script type="text/javascript" src="js/jquery.easing.1.3.js">   


<!-- Last but not least  -->           
<script type="text/javascript" src="js/jquery.section-scroll.js">

HTML

<div class="scrollable-section" data-section-title="About Us"></div> 
<div class="scrollable-section" data-section-title="Example"></div> 
<div class="scrollable-section" data-section-title="Testimonials"></div>

scrollable-section

Assign this class to each section you want to use as part of the navigation.

data-section-title

Plugin picks this attribute's value to use as each menu item's title, e.g. right now it says HTML in navigation.

Call and Customize

Call Him

<script type="text/javascript"> 

    $(document).ready(function () { 
        $('body').sectionScroll(); // Easy Peasy Lemon Squeezy 
    }) 

</script>

Defaults

bulletsClass: 'section-bullets',
sectionsClass: 'scrollable-section',
scrollDuration: 1000,
titles: true,
topOffset: 0,
easing: ''

Options

Variable	Type	Example	Description
bulletsClass	string	bulletsClass: 'my-class'	This will override plugin's default class of bullet navigation, you can change this incase if you have your own styling.
sectionsClass	string	sectionsClass: 'my-sections'	If you define your own class then you will use `<div class="my-sections"></div>` plugin will no more look for 'scrollable-section' class it will look for your defined class and generate bullets.
scrollDuration	int	scrollDuration: 3000	Time it takes to scroll from one section to the other
titles	boolean	titles: false	Setting it to false will hide the titles from navigation
topOffset	int	topOffset: 100	Setting topOffset to 100 will cause the section to scroll but keep 100px distance from the top of window
easing	string	easing: 'easeInOutQuart'	By default plugin uses no easing effects and this example uses 'easeInOutQuart', if you want to use easings you have to include this plugin http://gsgd.co.uk/sandbox/jquery/easing/ Easings cheat sheet:

Events

Event	Description
section-reached	This event is called every time a section is scrolled into view.

$('body').on('section-reached', function(){ 
    console.log('section-reached'); 
})

More

Plugin also gives us access to active section through variable

activeSection

For example we can do this:

$('body').on('section-reached', function(){

    var section_title = $('body').sectionScroll.activeSection.data('section-title');
    alert(section_title);

})

Let's suppose we have

<section class="scrollable-section" data-short-description="We love coding"></section>

Now we can get short description and print that in our imaginary div

$('body').on('section-reached', function(){

    var short_description = $('.body').sectionScroll.activeSection.data('short-description');
    $('div').html(short_description);
    $('body').sectionScroll.activeSection.css('background-color', '#000'); // Let's change background color of active section

})