How to show only the corresponding div nav-tag?

var topRange      = 200,  // measure from the top of the viewport to X pixels down
 edgeMargin    = 20,   // margin above the top or margin from the end of the page
 animationTime = 1200, // time in milliseconds
 contentTop = [];
 $(document).ready(function(){ 
 $('html,body').bind('scroll mousedown DOMMouseScroll mousewheel keyup',       function(e){
if ( e.which > 0 || e.type == 'mousedown' || e.type == 'mousewheel' ){
$('html,body').stop();
}
})

// Set up content an array of locations
$('#sidemenu').find('a').each(function(){
contentTop.push( $( $(this).attr('href') ).offset().top );
 })

// Animate menu scroll to content
$('#sidemenu').find('a').click(function(){
var sel = this,
   newTop = Math.min( contentTop[ $('#sidemenu a').index( $(this) ) ],   $(document).height() - $(window).height() ); // get content top or top position if at the document bottom
   $('html,body').stop().animate({ 'scrollTop' : newTop }, animationTime,    function(){
   window.location.hash = $(sel).attr('href');
    });
   return false;
    }  )


   $(window).scroll(function(){
   var winTop = $(window).scrollTop(),
   bodyHt = $(document).height(),
   vpHt = $(window).height() + edgeMargin;  // viewport height + margin
   $.each( contentTop, function(i,loc){
   if ( ( loc > winTop - edgeMargin && ( loc < winTop + topRange || (  winTop + vpHt ) >= bodyHt ) ) ){
   $('#sidemenu li')
  .removeClass('selected')
  .eq(i).addClass('selected');
   }
   })
   })

   })

      

http://jsfiddle.net/m2zQE/

In this script I only want the corresponding div to be visible not to others, but when we scroll, then the following will be shown. This way it will work as if we were scrolling the screen, the next tab is active and the relevant information goes to the viewport, there is no scrolling, and there is no other div visible either.

How can I do this, I need to integrate this part in a full page website where there are 1-10 functions, when the user scrolls one by one, he can see the functions.

+3
jquery


source to share


No one has answered this question yet

Check out similar questions:

917
How can I replace innerHTML div with jQuery?
854
How to allow only numeric (0-9) in HTML input field using jQuery?
4
-Webkit-scroll bar + overflow + JQuery scrollTop returns always zero
4
prototype: keep an element in view while scrolling
1
JQuery code not working on iPad only
0
How to change url hash on scroll>
0
Can't get scroll position
0
html scrolltop mystery
0
jQuery sets the margin-top for a fixed header when loaded from the middle of the page
0
How to show load on each click first, not on content



All Articles
Loading...
X
Show
Funny
Dev
Pics