Div fadeIn with specific condition

Question

first, sorry for my poor english...

Ok, here's the situation:

I have an one-page-site with a navbar that looks like this

<ul>
    <li><a href="link1">#section1</a></li>
    <li><a href="link2">#section2</a></li>
</ul>

Additonally I have a jquery-script running, that fades the navbar in or out and adds or removes the class .selected to the listitem with the link of the id which is currently visible on the screen (scrollspy).

And now here's the problem:

I want to grab the link with the class .selected, e.g. "#section2" and then I want to make a div visible.

Maybe I'm thinking too complicated. The poor Problem is: Show me a specific div on a specific site. I think the script which is already running could help. Maybe I'm wrong.

Please help me!

Thank you

EDIT:

try scrolling down on this poorly created fiddle ;) on page 2 and only on page 2 div id problem should appear! http://jsfiddle.net/2a555dyy/

EDIT ! Inserted correct fiddle... – user3449855 Sep 24 '14 at 16:23 — user3449855, Sep 24 '14 at 16:23

Peter Pawn · Answer 1 · 2014-09-24T10:10:18.713

1

If this is not the solution, could you append a jsfiddle? :)

$('a.selected').click(function() {
      $('.sites').fadeOut();
      $('#side1 .myDiv').fadeIn();
});

Find my example here:

http://jsfiddle.net/h7wwe8xg/

edited Sep 24 '14 at 10:10

answered Sep 24 '14 at 10:04

Peter Pawn

11
3

score 0 · Answer 2 · answered Sep 24 '14 at 10:16

Where is the div (that you want to turn on and off) located? I think you can show / hide the div with a simple CSS.

.div {display: none}
#section2 .div {display: block}

You can do a fancier animation (fade in / out) by using a hook provided by spyscroll. quick research makes me think this is possible:

$('.tile').on('scrollSpy:enter', function() {
    // put your fade in code here
});

$('.tile').on('scrollSpy:exit', function() {
    // fadeout code here
});

Div fadeIn with specific condition

2 Answers2