html - One Page Navigation using Jquery -


anybody can me on how create navigation on wordpress theme

http://teothemes.com/wp/scrn/

it seems when got on top navigation stick below slider , when scroll down page navigation attached

here show simple example make stiky element:

html snippet codes :

<nav class="sticky">     <ul>         <li>         <a href="#intro">home</a>         </li>         ...                 <li>         <a href="#contact">contact</a>         </li>     </ul> 

css snippet codes:

nav {     background: #f5f5f5;     height: 40px;     position: relative;     text-align: center;     width: 100%;     z-index: 1000;  nav.fixed{     position: fixed;  top: 0px; } 

jquery codes:

if ($('nav').hasclass('sticky')) {         var top = $('.sticky').offset().top - parsefloat($('.sticky').css('margin-top').replace(/auto/, 0));         $(window).scroll(function (event){           var y = $(this).scrolltop();           if (y >= top) {               $('.sticky').addclass('fixed');           } else {                           $('.sticky').removeclass('fixed');           }         });     } 

here demo :

http://jsfiddle.net/pbhne/

but use plugin used on website http://teothemes.com/wp/scrn/.

http://stickyjs.com/


Comments

Popular posts from this blog

android - getbluetoothservice() called with no bluetoothmanagercallback -

sql - ASP.NET SqlDataSource, like on SelectCommand -

ios - Undefined symbols for architecture armv7: "_OBJC_CLASS_$_SSZipArchive" -