CODEWITHSUNDEEP
csshtmlnavigation
Morten Hagh
Morten Hagh

Reputation: 2113

change css when focus on div changes

I don't know if this is possible. I am creating a Single Page Layout site, and on the home section I have a menu

<nav>
   <ul id="navigation">
      <li><a href="#1" title="1">1</a></li>
      <li><a href="#2" title="2">2</a></li>
      <li><a href="#3" title="3">3</a></li>
      <li><a href="#4" title="4">4</a></li>
      <li><a href="#5" title="5">5</a></li>
   </ul>
</nav>

This is placed inside <section id="home"></section>.

Is it possible to use a different layout on that menu if #home looses focus, i.e. another section is viewed, fx #3. In the home section the menu is placed in the bottom, but I want it to be fixed to the top and change layout when the user scrolls down or clicks a link.

Or will I have to create another menu, f.x. #menu-scroll ?

Upvotes: 0

Views: 850

Answers (2)

Gaurav
Gaurav

Reputation: 12806

Note that the focus (the link or control that has the :focus selector) does not change when you scroll to another section of the document. To handle that, consider using the jquery "scroll" event:

$(window).scroll(function() {
    if ($(window).scrollTop < $("#home").offset().top) {
        $("#navigation").removeClass("scrolledDown").addClass("scrolledUp");
    } else {
        $("#navigation").removeClass("scrolledUp").addClass("scrolledDown");
    }
});

This can be easily extended to several sections. Note that the scroll event is fired a lot, so don't do too much in this handler.

Upvotes: 1

Matthew R.
Matthew R.

Reputation: 4350

You can use the :focus selector.

You can also try using jQuery to add classes when targets are focussed or blurred.

Upvotes: 0

Related Questions