当 div # 滚动到视图中时，jQuery 更改导航上的 css

Question

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

网站使用一个向下滚动的大页面。当您向下滚动并传递不同的部分时，左侧的菜单导航会在相应的 div 进入视图时将 css 类更改为“当前”。

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

我对 jQuery 相当陌生，我想写的是这样的（通俗地说）：

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

...并对 4 个不同的内容 div 重复此操作。

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

Answer 1

我没有看代码示例（挑战自己更有趣：P），但这就是我要做的 - 此处演示。

我保存了每个元素块的位置以尽量减少 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');
   }
  });
 });

});

Answer 2

您可以使用 $(window).scrollTop(); 来了解距离最顶部有多远。

JS：

$(window).scroll(
    function() {

       var top = 0;
       top = $(window).scrollTop();

       if(top < 500){
         $("a[href='#top']").parent().addClass("current");
         $("a[href='#top']").parent().siblings().removeClass("current");
       }

       if((top >= 500) && (top < 1000)){
         $("a[href='#work']").parent().addClass("current");
         $("a[href='#work']").parent().siblings().removeClass("current");
       }    

       if((top >= 1000) && (top < 1500)){      
         $("a[href='#blog']").parent().addClass("current");
         $("a[href='#blog']").parent().siblings().removeClass("current");
        }   

CSS：

<style type="text/css">
body{
height: 2000px;
}
div#nav{
position: fixed;
top: 170px;
z-index: 10;
}
#nav ul li{
display: block;
margin: 0;
padding: 0;
background: #FFFFFF;
}
#nav ul li a{
backgroundColor: #FFFFFF;
color: #C55500;
}
#nav ul li.current a{
background: none repeat scroll 0 0 #303E3F;
color: #FFFFFF;
}
#nav ul li a{
-moz-border-radius: 5px 5px 5px 5px;
display: block;
line-height: 1;
padding: 10px;
text-align: right;
text-decoration: none;
width: 70px;
}

HTML：

<div id="nav">
  <ul>
    <li><a title="" href="#top">Home</a></li>
    <li><a title="" href="#work">Work</a></li>
    <li><a href="#blog" title="">Blog</a></li>

  </ul>
</div>

Answer 3

很好，谢谢，这帮助我理解了窗口和链接之间的关系，但我不想使用特定的像素高度，而是与保存每个链接内容的 div 相关。
我展示的原始站点使用以下内容：

function animateMenuLogo(logo, menu) {
    var scrollposition = $(window).scrollTop();
    var top = $("a[name='"+ menu +"']").offset().top;
    var sectionheight = $("a[name='"+ menu +"']").next().outerHeight();

    if (((top-100) < scrollposition) && ((top+sectionheight-200) > scrollposition)) {
        $(logo).fadeIn(500);
        $("a[href='#"+ menu +"']").css({ backgroundColor: "#303e3f", color: "#ffffff" });
        $("a[href='#"+ menu +"']").parent().addClass("current");
    } else {
        $(logo).fadeOut(500);
        $("a[href='#"+ menu +"']").css("background-color","transparent");
        $("a[href='#"+ menu +"']").css("color","#717c7d");$("a[href='#"+ menu +"']").parent().removeClass("current");
    }       
}

现在，这只是代码的一部分，它还控制右侧出现的徽标，但我感兴趣（并困惑）的部分是变量 scrollposition 和 sectionheight 必须使菜单能够根据该部分是否在视图中更改类。