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
Post a Comment