当div＃滚动到视图中时，jQuery更改导航上的css [英] jQuery changing css on navigation when div # scrolls into view

问题描述

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

I'm looking to recreate the effect used on this site: http://www.brizk.com/

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

The site uses one large page that scrolls down. As you scroll down and pass different sections the menu navigation on the left changes css class to "current" as the corresponding div comes into view.

我认为这可以完成jQuery使用$（window）.height（）;

I presume this can be done with jQuery using $(window).height();

我对jQuery很新，我想写的东西是这样的

I'm fairly new to jQuery and what I want to write is something like this (in laymans terms):

• 获取浏览器窗口的高度
  - 如果div＃content1距离顶部100像素和/ link1 to'.current'
  - else remove .current从所有菜单a链接

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

... and repeat for 4 different content divs.

任何人都可以指向正确的方向..？
感谢。

Can anyone point me in the right direction..? Thanks.

推荐答案

我没有看代码示例（挑战自己更有趣：但这是我会这样做 - 这里演示。

I didn't look at the code example (it's more fun to challenge myself :P) but this is how I would do it - demo here.

我保存了每个元素块的位置以最小化DOM调用的数量，然后通过数组搜索。

I saved the position of each element block to minimize the number of DOM calls, then just searched through the array. To help you understand some of the variables.

$(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');
   }
  });
 });

});

这篇关于当div＃滚动到视图中时，jQuery更改导航上的css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！