menu - Floating/Hovering PageList in Blogger -


does know how create or know html/css floating/hovering pagelist (navigation menu bar) blogger? seen here: http://www.fabulousk.com & http://apairandasparediy.com/. want display when user scrolling down on site. i'm using code edit text of pagelist, if helps any.

.pagelist {text-align:center !important;  text-transform:uppercase;  border-top: solid black 1px;  border-bottom: solid black 1px;  letter-spacing:2px} .pagelist li  {display:inline !important; float:none !important;} 

i have read tutorial this. can done using jquery.

first of need have id of pagelist gonna #pagelist1

then add style want add , then

add css, using class sticky.

so in case of second example this:

.sticky{     position: fixed;     top: 0;     left: 0;     width: 100%;     background: white; } 

then add following script (best in widget, , put in bottom of blog) (if have jquery framework, don't need add first line.

what scipt add class sticky pagelist, stick top scroll down.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  <script type='text/javascript'> //<![cdata[    $(window).scroll(function(){    var offset = 0;   var sticky = false;   var top = $(window).scrolltop();    if ($("aside").offset().top < top) {    $("#pagelist1").addclass("sticky");    sticky = true;   } else {    $("#pagelist1").removeclass("sticky");   }  }); //]]> </script> 

Comments

Popular posts from this blog

ios - UICollectionView Self Sizing Cells with Auto Layout -

node.js - ldapjs - write after end error -

DOM Manipulation in Wordpress (and elsewhere) using php -