当 div # 滚动到 View 中时，jQuery 在导航上更改 css

Question

我希望重新创建此网站上使用的效果:http://www.brizk.com/

该站点使用向下滚动的大页面。当您向下滚动并通过不同的部分时，左侧的菜单导航会将 css 类更改为“当前”，因为相应的 div 会出现。

我认为这可以通过使用 $(window).height(); 的 jQuery 来完成；

我是 jQuery 的新手，我想写的是这样的东西(通俗地说):

• 获取浏览器窗口的高度– 如果 div#content1 距顶部 100px 和/或距底部 200px，将菜单 a#link1 更改为“.current”– 否则从所有菜单和链接中删除 .current

... 并为 4 个不同的内容 div 重复。

谁能指出我正确的方向......？谢谢。

Answer 1

我没有看代码示例(挑战自己更有趣 :P)但我会这样做 - demo here .

我保存了每个元素 block 的位置以尽量减少 DOM 调用的次数，然后只搜索整个数组。帮助您了解一些变量。

$(window).height() // returns the viewport height
$(document).height() // returns the height of the entire document
$(window).scrollTop() // returns the Y position of the document that is at the top of the viewport

脚本:

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(){

 // Stop animated scroll if the user does something
 $('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;
 });

 // adjust side menu
 $(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');
   }
  });
 });

});