滚动时突出显示菜单（如果到达div） [英] highlight menu on scrolling (if reach div)

问题描述

http://jsfiddle.net/WeboGraph/vu6hN/2/ （这是我想要的示例）

我的代码：
（JS）

  $（document）.ready（function（）{
 $ '）.on（'click'，function（event）{
 $（this）.parent（）。find（'a'）。removeClass（'active_underlined'）; 
 $（this）。 addClass（'active_underlined'）; 
}）; 
 
 $（window）.on（'scroll'，function（）{
 $（'。target' （function（）{
 if（$（window）.scrollTop（）> = $（this）.position（）。top）{
 var id = $（this）.attr '）; 
 $（'nav a'）。removeClass（'active_underlined'）; 
 $（'nav a [href =＃'+ id +']'）。addClass ; 
} 
}）; 
}）; 
}）; 
  

my（html nav）

 < nav> 
< div id =cssmenu> 
< ul id =horizo​​ntalmenuclass =underlinemenu> 
< li>< a data-scroll href =＃fdesignsclass =active_underlined> FDesigns< / a> < / li> 
< li>< a data-scroll href =＃skills>技能< / a> < / li> 
< li>< a data-scroll href =＃workflow> WORKFLOW< / a> < / li> 
< li>< a data-scroll href =＃portfolio> Portfolio< / a> < / li> 
< li>< a data-scroll href =＃about>关于< / a> < / li> 
< li>< a data-scroll href =＃kontakt> Kontakt< / a> < / li> 
< / ul> 
< / div> 
< / nav> 
  

my（css）

  .active_underlined a {
 color：#fff; 
 border-bottom：2px solid #ebebeb; 
} 
 
 a.active_underlined {
 color：#fff; 
 border-bottom：2px solid #ebebeb; 
} 
  

这里是项目的链接：http://www.f-designs.de/test_onesite

解决方案

使用 $（this）.offset（）。top 而不是 $（this）.position（）。top

小提琴

As .position（）获取匹配元素集合中第一个元素的当前坐标， .offset（）获取相对于文档的匹配元素集合中第一个元素的当前坐标。

在您的网站中，所有包含 .target 的类的DIV都位于 .target 返回值 .position（）。top 等于0。

减小偏移值， c $ c> class 更改元素到达菜单时，通过使如果条件如下：

$ b b

  if（$（window）.scrollTop（）> = $（this）.offset（）。top  -  $（＃cssmenu）。height b $ b  

i want highlight the menu point if the div is scrolled // or clicked.

http://jsfiddle.net/WeboGraph/vu6hN/2/ (thats an example what i want)

my code: (JS)

    $(document).ready(function(){
      $('nav a').on('click', function(event) {
          $(this).parent().find('a').removeClass('active_underlined');
          $(this).addClass('active_underlined');
      });

      $(window).on('scroll', function() {
          $('.target').each(function() {
              if($(window).scrollTop() >= $(this).position().top) {
                  var id = $(this).attr('id');
                  $('nav a').removeClass('active_underlined');
                  $('nav a[href=#'+ id +']').addClass('active_underlined');
              }
          });
      });
    });

my (html nav)

        <nav>
           <div id="cssmenu">
              <ul id="horizontalmenu" class="underlinemenu">
                  <li><a data-scroll href="#fdesigns"  class="active_underlined">FDesigns</a> </li>
                  <li><a data-scroll href="#skills">skills</a> </li>
                  <li><a data-scroll href="#workflow">WORKFLOW</a> </li>
                  <li><a data-scroll href="#portfolio">Portfolio</a> </li>
                  <li><a data-scroll href="#about">About</a> </li>
                  <li><a data-scroll href="#kontakt">Kontakt</a> </li>
              </ul>   
          </div>
        </nav> 

my (css)

.active_underlined a {
  color: #fff;
  border-bottom: 2px solid #ebebeb;
}

a.active_underlined {
  color: #fff;
  border-bottom: 2px solid #ebebeb;
}

here a link to the project: http://www.f-designs.de/test_onesite

解决方案

Use $(this).offset().top instead of $(this).position().top

Fiddle

As .position() get the current coordinates of the first element in the set of matched elements, relative to the offset parent whereas .offset() get the current coordinates of the first element in the set of matched elements, relative to the document.

In your website all the DIV with class inside .target are inside therefore all the element of class .target are returning the value .position().top equal to 0.

Decrease the offset value so that the class change when element reach the menu by making the if condition like this:

if($(window).scrollTop() >= $(this).offset().top - $("#cssmenu").height())

这篇关于滚动时突出显示菜单（如果到达div）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！