-1

Does anyone know how to create or know the HTML/CSS for a floating/hovering pagelist (navigation menu bar) for Blogger? as seen here: http://www.fabulousK.com & http://apairandasparediy.com/. I just want it to display when a user is scrolling down on my site. I'm using this code to edit the text of the PageList, if it 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;}
user2676764
  • 1
  • 2
  • Would you kindly post some code so we know what you're actually trying? – simonmorley Aug 13 '13 at 00:07
  • @simonmorley I don't have any code that I've tried to manipulate. All I have are the link examples above. Sorry! It's just the basic .PageList in Blogger. – user2676764 Aug 13 '13 at 00:09
  • You could try and write some code then before posting a question here. You will get a much better reaction from your peers and SO community. – simonmorley Aug 13 '13 at 00:10
  • @simonmorley Since you are so intent on educating a newbie on the etiquette of the SO Q&A system, I'll give you what I got. This is a piece of code used to edit the text of the pagelist. Sorry if that isn't good enough for you..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;} – user2676764 Aug 13 '13 at 00:45

1 Answers1

0

I have read a tutorial for this. It can be done using jQuery.

First of all you need to have the ID of your PageList which is probably gonna be #PageList1

Then just add the style you normally would want to add and then

add another CSS, using the class sticky.

So in case of the second example this would probably look something like this:

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

Then add the following Script (best in a widget, and put it in the bottom of your blog) (if you already have the jQuery framework, you don't need to add the first line.

What this scipt does is add the class sticky to you pagelist, so it will stick to the top as you 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>
KreaTief
  • 416
  • 1
  • 4
  • 13