删除突出显示菜单项

时间：2016-06-29 12:12:05

标签： javascript jquery html css

我想在滚动到下一个菜单后删除突出显示。我创建了一个菜单栏，基于滚动位置。滚动的菜单项正常工作。如果我点击菜单，即使滚动到下一个菜单后它总是突出显示< / p> 

$(window).scroll(function(){
  var menu = $('.secMenu');
  var origOffsetY = menu.offset().top;
  if($(document).scrollTop() > 0) {
    $('.secMenu').addClass('menuSticky');
    $('.nav>li>a:hover').css('background-color','#612873');

  } else {
    $('.secMenu').removeClass('menuSticky');
    $('.secMenu').css('background-color','white');
  }  
  $('.test').each(function() {
    if($(window).scrollTop() >= $(this).offset().top) {
      var id = $(this).attr('id');
      $('.nav li a').removeClass('active');
      $('.nav a[href=#'+ id +']').addClass('active');
    }
  });
});
.menu{
  text-align:left;
  padding-left: 7%;
  color:#fff;
}

.small .menu {
  text-align:right;
  margin-top:1%;
}

.menu li{
  display:inline-block;
}

.menu a {
  text-align:left;
  color: #fff!important
}

.menu a:hover {
  text-decoration:none;
  color: #fff!important;
}

.menuSticky {
  top:0%;
  z-index: 800;
  position: fixed;
  width: 100%;
  left:1.1%;
}

@media (max-width:480px) {
  .menuSticky {
    position:static;
  }
}

.secMenu {
  background-color: #9a5cad!important;
  background-image: none;
  border-color: #9a5cad!important;
  border: none!important;
  border-radius: 0px;
  color: #fff !important;
  font-size: 16px !important;
}

.nav>li>a:hover {
  text-decoration: none;
  background-color: #fff;
}

.nav .scrollColor a {
  text-decoration: none;
  background-color: #612873;
}

.nav a {
  border-bottom: 1px solid #666;
  color: #333;
  display: block;
  padding: 10px;
  text-align: center;
  text-decoration: none;
}

.nav a:hover, .nav a.active {
  background: #666;
  color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row secMenu">

  <div class="col-md-9 col-sm-12 menu">
    <ul class="nav">
      <li class="test1"><a href="#Consulting" class="active">Consulting & Solutions</a></li>
      <li class="test2"><a href="#Segments">Segments</a></li>
      <li class="test3"><a href="#Perspectivesa">Our Partners</a></li>
      <li class="test4"><a href="#Perspectives">Perspectives</a></li>
    </ul>  
  </div>
</div>   <!--End of second menu -->
<div class="test" id="Consulting">
  <h1>Consultant</h1>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br>

</div>
<div class="test" id="Segments">
  <h1>Segments</h1>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br>

</div>
<div class="test" id="Perspectivesa">
  <h1>Perspectivesa dfsd sdgfs</h1>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br>

</div>
<div class="test" id="Perspectives">
  <h1>Perspectives</h1>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br>

</div>

3 个答案:

答案 0 :(得分：2)

在这里你去 jsfiddle

从jq中删除导致问题的background-color css。

将jq更改为此

$(window).scroll(function(){
   var menu = $('.secMenu');
   var origOffsetY = menu.offset().top;
       if($(document).scrollTop() > 0) {
            $('.secMenu').addClass('menuSticky');


        } else {
        $('.secMenu').removeClass('menuSticky');

        }  
 $('.test').each(function() {
        var id = $(this).attr('id');
        var outheight = $(this).outerHeight();
        var space = $(this).offset().top ;
        if ($(window).scrollTop() > space - 1 && $(window).scrollTop() < space + outheight - 1) {

        $(".nav>li>a[href='#" + id + "']").parent().addClass("active");

        } else {
                $(".nav>li>a[href='#" + id + "']").parent().removeClass("active");
            } 

});

和css：

.nav a:hover,li.active >a {
background: #666;
color: #fff;
}

让我知道是否有帮助

答案 1 :(得分：1)

你在这一行中只犯了一个错误：

$('.nav a[href=#'+ id +']').addClass('active');

用以下代码替换你的js代码：

    $(window).scroll(function(){
   var menu = $('.secMenu');
            var origOffsetY = menu.offset().top;
           if($(document).scrollTop() > 0) {
                $('.secMenu').addClass('menuSticky');
                $('.nav>li>a:hover').css('background-color','#612873');

            } else {
            $('.secMenu').removeClass('menuSticky');
                $('.secMenu').css('background-color','white');
            }  
     $('.test').each(function() {
        if($(window).scrollTop() >= $(this).offset().top) {
            var id = $(this).attr('id');
            $('.nav li a').removeClass('active');
            $('.nav a[href="#'+ id +'"]').addClass('active');
        }
    });

});

这适合我。

以下是实例：https://jsfiddle.net/bembvptx/5/

答案 2 :(得分：1)

删除活动课程时，忘记将链接颜色更改回原始课程。试试这个：

ParentComponent
$(window).scroll(function(){
   var menu = $('.secMenu');
			var origOffsetY = menu.offset().top;
	       if($(document).scrollTop() > 0) {
		        $('.secMenu').addClass('menuSticky');
				$('.nav>li>a:hover').css('background-color','#612873');
				
			} else {
			$('.secMenu').removeClass('menuSticky');
				$('.secMenu').css('background-color','white');
			}  
	 $('.test').each(function() {
        if($(window).scrollTop() >= $(this).offset().top) {
            var id = $(this).attr('id');
            $('.nav li a').removeClass('active');
            //resetting you link background back to previous
            $('.nav li a').css('background-color','rgb(154,92,173)');
            $('.nav a[href=#'+ id +']').addClass('active');
          //resetting the background color for active link
          $('.active').css('background-color','#666');
        }
    });
	 
});
.menu{
     text-align:left;
	 padding-left: 7%;
	 color:#fff;
	}
    .small .menu{
		
    text-align:right;
	margin-top:1%;
	
  
	}
   .menu li{display:inline-block;}
   .menu a{
    text-align:left;
	 color: #fff!important
   }
   .menu a:hover{
    text-decoration:none;
	 color: #fff!important;
	
   }
   .menuSticky{
	  top:0%;
      z-index: 800;
      position: fixed;
      width: 100%;
	  left:1.1%;
    }
	@media (max-width:480px)
{
 .menuSticky{
	  position:static;
    }
}
	.secMenu{
	  background-color: #9a5cad!important;
    background-image: none;
    border-color: #9a5cad!important;
    border: none!important;
    border-radius: 0px;
    color: #fff !important;
	font-size: 16px !important;
	}
	.nav>li>a:hover {
    text-decoration: none;
    background-color: #ffff;
  }
  .nav .scrollColor a {
    text-decoration: none;
    background-color: #612873;
  } 
  .nav a {
    border-bottom: 1px solid #666;
    color: #333;
    display: block;
    padding: 10px;
    text-align: center;
    text-decoration: none;
}

.nav a:hover, .nav a.active {
    background: #666;
    color: #fff;
}

相关问题
最新问题