Question

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/

在这个小提琴中，我想只有相应的div才能看到而不是其他的，当我们滚动然后接下来将会显示。因此，当我们在屏幕上滚动时，下一个标签处于活动状态并且相应进入视口，没有滚动，也没有其他div的可见性。

我该如何做到这一点，我必须将这个部分整合到一个整页网站中，当用户逐个滚动他可以看到这些功能时，会有1-10个功能。

如何只显示nav-tag的相应div？

0 个答案: