SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Sep 2009
    Posts
    316
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Highlight anchor on scroll technique - How do I do this?

    I want to do something like this - http://kiskolabs.com/#blog

    Menu items highlight when scrolled to different positions. Can anyone point me in the direction of tutorials. Also, is there a name for this type of technique?

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    I haven't come across that before but it would be relatively easy to do assuming that each section is in a div with a different id (which it would need to have as the destination for the menu anyway).

    Simply attach a mouseover to each of the divs that applys the appropriate style to the menu entry and a mouseout that restyles it back.

    As a simple example using inline event handlers you would have something along the lines of:

    Code:
    <li id="menuservice"><a href="#service">Service</a></li>
    
    <div id="service" onmouseover="document.getElementById('menuservice').style.backgroundColor = '#00c';" 
    onmouseout="document.getElementById('menuservice').style.backgroundColor = '#ccc';">
    content
    </div>
    If I were adding this to a real web page I'd use unobtrusive event listeners and make use of the id on the div to attache them.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    rpeg, I've seen something like this implemented using a jQuery plugin called "Waypoints" - if you don't mind using jQuery on your site, it might be worth taking a look at their demo page: http://imakewebthings.com/jquery-waypoints/
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •