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

问题描述

如果 div 滚动//或单击，我想突出显示菜单点.

http://jsfiddle.net/WeboGraph/vu6hN/2/(这就是我想要的例子)

我的代码:(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');}});});});

我的(html 导航)

 
<div id="cssmenu"><ul id="horizo​​ntalmenu" class="underlinemenu"><li><a data-scroll href="#fdesigns" class="active_underlined">FDesigns</a><li><a data-scroll href="#skills">skills</a><li><a data-scroll href="#workflow">WORKFLOW</a><li><a data-scroll href="#portfolio">Portfolio</a><li><a data-scroll href="#about">关于</a><li><a data-scroll href="#kontakt">Kontakt</a>

</nav>

我的(css)

.active_underlined a {颜色:#fff;边框底部:2px 实心 #ebebeb；}a.active_underlined {颜色:#fff;边框底部:2px 实心 #ebebeb；}

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

解决方案

使用 $(this).offset().top 而不是 $(this).position().top

小提琴

As .position() 获取匹配元素集中第一个元素的当前坐标，相对于父偏移量，而 .offset() 获取当前坐标匹配元素集中第一个元素的坐标，相对于文档.

在您的网站中，所有带有 .target 类的 DIV 都在里面，因此类 .target 的所有元素都返回值 .position().顶部等于0.

减少偏移值，使 if 条件如下:

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

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屋！