ThemeShaper Forums » Thematic


Thematic CSS scroll help please!

(3 posts)
  • Started 7 years ago by proto
  • Latest reply from proto
  • This topic is resolved
  1. proto

    Hi folks,

    Just a quick one I hope. I'm trying to implement a scrolling nav box menu on my page. When a user scrolls down the page the idea is that the nav menu (on the left hand side) moves with them and the page content scrolls below. I want to use position absolute rather than fixed since absolute means it will work in IE and all those buggy browsers (oh the joys of IE!)

    Here's my website with the nav menu (but it doesn't scroll):

    Here's a website that has successfully implemented a scroll effect using position absolute, what I'm hoping to do also:

    I've tried replicating the blackestate CSS on website but it doesn't work. I know it's probably something small but if anyone on here has any ideas it would be greatly appreciated! When I set position to absolute the nav bar merely stays in the same position but with the blackestate website it scrolls! I've tried quite a few combo's (eg give the body a z-index and relative position) as well as googling the problem. Any help much appreciated - thanks!

    Posted 7 years ago #
  2. it isn't a css only solution. if you watch in firebug or dev tools then you will see the CSS change as you scroll. it goes from absolute to fixed.

    <div id="nav" class="grid_2 alpha" style="position: absolute; top: 380px;">


    <div id="nav" class="grid_2 alpha" style="left: 311px; top: 63px; position: fixed;">

    which says jquery!

    also, the blackestate website is gorgeous.

    Posted 7 years ago #
  3. proto


    Thanks so much. I was looking into the most obscure CSS thinking I'm going to have an "Aha! I've found you moment!" Thank you for saving me and showing me that Jquery is riding to the rescue (I'm off to find a jquery solution now!)

    You're right - isn't the black estate website nicely designed!

    Thanks again :)

    Posted 7 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.