CODEWITHSUNDEEP
jqueryfadein
user3449855
user3449855

Reputation: 11

Div fadeIn with specific condition

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/

Upvotes: 0

Views: 142

Answers (2)

Melissa Hie
Melissa Hie

Reputation: 471

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
});

Upvotes: 0

Peter Pawn
Peter Pawn

Reputation: 11

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/

Upvotes: 1

Related Questions