检查都scrollTop的和id抵消了单个条件

Question

粘菜单我要检查的滚动位置大于350和menuSticky偏移位置是相同的condition.that条件92不working.I给我一段代码

$(window).scroll(function(){ 
 
    
 
\t \t \t if($(document).scrollTop() > 350) { 
 
\t \t \t \t $('.secMenu').addClass('menuSticky'); 
 
\t \t \t 
 
\t \t \t } else { 
 
\t \t \t \t $('.secMenu').removeClass('menuSticky'); 
 
\t \t \t } 
 
     
 
\t \t \t var menu = $('.menuSticky'); //shows error 
 
      // var menu = $('.secMenu'); working 
 
\t \t \t var origOffsetY = menu.offset().top; 
 
\t \t \t console.log(menu.offset().top);     
 
\t \t \t if((($('.menuSticky').offset.top)==92)) { 
 
\t \t \t console.log('true'); 
 
\t \t \t $('.dropdown').hover(function() { 
 
\t \t \t $('.secMenu').hide(); 
 
       $(this).toggleClass("open"); 
 
\t \t \t }).mouseleave(function(){ 
 
\t \t \t $('.secMenu').show(); 
 
\t \t \t });  
 
\t \t } \t  
 

 
\t 
 
});

.menuSticky{ 
 
\t /*top:14%; */ 
 
\t top:92px; 
 
\t z-index:999; 
 
     position: fixed; 
 
     width: 100%; 
 
\t left:1.1%; 
 
\t 
 
    } 
 
#consultant,#segment,#partner,#insights{ 
 
min-height:100vh; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<div class="row secMenu"> 
 
\t \t <div class="col-md-9 col-sm-12 menu"> 
 
\t \t <ul class="nav navMenu"> 
 
\t \t \t <li class="test1" ><a href="#consulting">Consulting & Solutions</a></li> 
 
\t \t \t <li class="test2" ><a href="#segments">Segments</a></li> 
 
\t \t \t <li class="test3" ><a href="#partner">Our Partners</a></li> 
 
\t \t \t <li class="test4" ><a href="#insights">Perspectives</a></li> 
 
\t \t \t </ul> 
 
\t \t </div> 
 
\t </div> <!--End of second menu --> 
 

 
<div class="" id="consultant">consultant 
 
</div> 
 
<div class="" id="segment">segment 
 
</div> 
 
<div class="" id="partner">partner 
 
</div> 
 
<div class="" id="insights">insights 
 
</div>

更新

$(window).scroll(function(){ 
 
    if($(document).scrollTop() > 350) { 
 
\t \t \t \t $('.secMenu').addClass('menuSticky'); 
 
\t \t \t 
 
\t \t \t } else { 
 
\t \t \t \t $('.secMenu').removeClass('menuSticky'); 
 
\t \t \t } 
 
var menu = $('.menuSticky'); 
 
\t \t \t \t console.log(menu.length); 
 
\t \t \t if (menu.length==1) { 
 
\t \t \t 
 
\t \t \t var origOffsetY = menu.offset().top; 
 
\t \t \t console.log(menu.offset().top);  
 
$('.dropdown').hover(function() { 
 
\t \t \t $('.menuSticky').hide(); 
 
       $(this).toggleClass("open"); 
 
\t \t \t }).mouseleave(function(){ 
 
\t \t \t $('.menuSticky').show(); 
 
\t \t \t });    
 
\t \t \t  
 
\t \t \t } 
 
    });

.menuSticky{ 
 
\t /*top:14%; */ 
 
\t top:92px; 
 
\t z-index:999; 
 
     position: fixed; 
 
     width: 100%; 
 
\t left:1.1%; 
 
\t 
 
    } 
 
#consultant,#segment,#partner,#insights{ 
 
min-height:100vh; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<div class="row secMenu"> 
 
\t \t <div class="col-md-9 col-sm-12 menu"> 
 
\t \t <ul class="nav navMenu"> 
 
\t \t \t <li class="test1" ><a href="#consulting">Consulting & Solutions</a></li> 
 
\t \t \t <li class="test2" ><a href="#segments">Segments</a></li> 
 
\t \t \t <li class="test3" ><a href="#partner">Our Partners</a></li> 
 
\t \t \t <li class="test4" ><a href="#insights">Perspectives</a></li> 
 
\t \t \t </ul> 
 
\t \t </div> 
 
\t </div> <!--End of second menu --> 
 

 
<div class="" id="consultant">consultant 
 
</div> 
 
<div class="" id="segment">segment 
 
</div> 
 
<div class="" id="partner">partner 
 
</div> 
 
<div class="" id="insights">insights 
 
</div>

Answer 1

在您的代码块中，当滚动位置小于350px时，有一个条件可以删除class menuSticky。因此，您将尝试从未定义的变量菜单中偏移顶部。

要解决您的问题，请在执行进一步操作之前检查menuSticky是否存在。

var menu = $('.menuSticky'); 
if (menu.length) { 
    var origOffsetY = menu.offset().top; 
    console.log(menu.offset().top); 
    if ((($('.menuSticky').offset.top) == 92)) { 
     console.log('true'); 
     $('.dropdown').hover(function() { 
      $('.secMenu').hide(); 
      $(this).toggleClass("open"); 
     }).mouseleave(function() { 
      $('.secMenu').show(); 
     }); 
    } 
}