当cooresponding div滚动到

时，将类添加到适当的导航选项卡我已阅读过类似问题并研究了滚动，但我不相信它会完成我所期望的，因为据我所知可以只使用引导样式突出显示。（如果它可以做更多，请让我知道！）当cooresponding div滚动到

我有一个4标签的导航栏（通常固定顶部）和一个单页网站。每个选项卡对应于页面的不同部分，并且每个部分具有不同的背景颜色。我想要做的就是将该区域的颜色更改为与相应区域的背景颜色相同的颜色（因此只有当新区域的顶部到达导航栏底部时，才会更改颜色）。我已经实现了这一点只有在单击该选项卡时才会起作用，触发滚动事件并添加活动类，但是如果未使用单击，则活动选项卡将保留，从而产生问题。

有没有办法改变基于当前滚动位置的变量？我尝试了我所能想到的，但尚未奏效。

$(window).on('scroll', function() { 
      if ($(window).scrollTop() >= $('#homeContainer').height()) { 
       $('.menuDiv').addClass('fixed'); 
      } else { 
       $('.menuDiv').removeClass('fixed'); 
      } 
     }); 


$("#menuHomeButton").click(function(e){ 
      $('html, body').animate({ 
       scrollTop: $('#homeContainer').offset().top 
      }, 'slow'); 
     }); 

     $("#menuAboutButton").click(function(e){ 
      $('html, body').animate({ 
       scrollTop: $('#aboutContainer').offset().top + 1 
      }, 'slow'); 
     }); 

     $("#menuPortfolioButton").click(function(e){ 
      $('html, body').animate({ 
       scrollTop: $('#portfolioContainer').offset().top - $('.menuDiv').height() + 1 
      }, 'slow'); 
     }); 

     $("#menuContactButton").click(function(e){ 
      $('html, body').animate({ 
       scrollTop: $('#contactContainer').offset().top - $('.menuDiv').height() + 1 
      }, 'slow'); 
     });

HTML

<div class="mainContainer"> 

    <div class="container blue" id="homeContainer"> 
    </div> 
    <div class="menuDiv"><!-- 
      --><div class="menuItem" id="menuHomeButton" ng-class="{'active':selectedTab === 'home'}" ng-click="selectedTab = 'home'"> 
     <div class="menuTextDiv"><p>Home</p></div><div class="menuItemColor blue"></div> 
    </div><!-- 
      --><div class="menuItem" id="menuAboutButton" ng-class="{'active2':selectedTab === 'about'}" ng-click="selectedTab = 'about'"> 
     <div class="menuTextDiv"><p>About</p></div><div class="menuItemColor blue2"></div> 
    </div><!-- 
      --><div class="menuItem" id="menuPortfolioButton" ng-class="{'active3':selectedTab === 'portfolio'}" ng-click="selectedTab = 'portfolio'"> 
     <div class="menuTextDiv"><p>Portfolio</p></div><div class="menuItemColor blue3"></div> 
    </div><!-- 
      --><div class="menuItem" id="menuContactButton" ng-class="{'active4':selectedTab === 'contact'}" ng-click="selectedTab = 'contact'"> 
     <div class="menuTextDiv"><p>Contact</p></div><div class="menuItemColor blue4"></div> 
    </div><!-- 
     --></div> 
    <div class="container blue2" id="aboutContainer"> 
    </div> 
    <div class="container blue3" id="portfolioContainer"> 
    </div> 
    <div class="container blue4" id="contactContainer"> 
    </div> 
    <div class="container"> 
    </div> 

</div>

这里是一个fiddle，但由于某些原因，我不能让NG单击并纳克级上班就可以了，它改变了标签的颜色。

下面是它的样子不是JS捣鼓一些图片：我想要的东西，有： http://i.gyazo.com/3c7d6d80a9a490b31e795cacebbaa1a0.png http://i.gyazo.com/1bd597080bdba6ffa34fe18cf5462b74.png 我不想要什么，但仍然还有：http://i.gyazo.com/d066effabd276d978e4775666a3b5d6c.png

如果任何人有解决方案我会非常棒！谢谢！

来源

2015-04-25 Moonshoes

从上获取的div的距离：

distance = $("div").scrollTop()

注：不使用VAR声明距离时，因为比你不能访问它的函数内

然后检查是否div已到达顶部，并添加class：

$(window).on('scroll', function() { 
    if(distance - $("div").scrollTop() >= distance){ 
     //do something 
    } 
});

来源

2015-04-25 05:02:21

对不起，我不是目前正在对这个，但在一天，所以我会尽力，并选择作为答案，如果它的作品，感谢响应！ – Moonshoes

当cooresponding div滚动到

回答

相关问题