html - One Page Navigation using Jquery -
anybody can me on how create navigation on wordpress theme
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 :
but use plugin used on website http://teothemes.com/wp/scrn/.
Comments
Post a Comment