在单一条件下检查粘性菜单的scrollTop和id偏移量

Question

我想检查滚动位置是否大于350并且menuSticky偏移位置在相同条件下为92.该条件不起作用。我给了我的代码

$(window).scroll(function(){
    
			if($(document).scrollTop() > 350) {
				$('.secMenu').addClass('menuSticky');
			  
			} else {
				$('.secMenu').removeClass('menuSticky');
			}
        
			 var menu = $('.menuSticky');  //shows error
             // var menu = $('.secMenu'); working
			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();
			});    
		   }	   

	
});

 .menuSticky{
	  /*top:14%; */
	  top:92px;
	  z-index:999;
      position: fixed;
      width: 100%;
	  left:1.1%; 
	  
    }
#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">
		<div class="col-md-9 col-sm-12 menu">
		 <ul class="nav navMenu">
			  <li class="test1"  ><a href="#consulting">Consulting & Solutions</a></li>
			  <li class="test2" ><a href="#segments">Segments</a></li>
			  <li class="test3" ><a href="#partner">Our Partners</a></li>
			  <li class="test4" ><a href="#insights">Perspectives</a></li>
			</ul>  
		</div>
	   </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) {
				$('.secMenu').addClass('menuSticky');
			  
			} else {
				$('.secMenu').removeClass('menuSticky');
			}
var menu = $('.menuSticky');
				console.log(menu.length);
			if (menu.length==1) {   
			 
			var origOffsetY = menu.offset().top; 
			 console.log(menu.offset().top);     
 $('.dropdown').hover(function() {
			  $('.menuSticky').hide();
                 $(this).toggleClass("open");
			}).mouseleave(function(){
			  $('.menuSticky').show();
			});              
			     
			}  
  });

.menuSticky{
	  /*top:14%; */
	  top:92px;
	  z-index:999;
      position: fixed;
      width: 100%;
	  left:1.1%; 
	  
    }
#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">
		<div class="col-md-9 col-sm-12 menu">
		 <ul class="nav navMenu">
			  <li class="test1"  ><a href="#consulting">Consulting & Solutions</a></li>
			  <li class="test2" ><a href="#segments">Segments</a></li>
			  <li class="test3" ><a href="#partner">Our Partners</a></li>
			  <li class="test4" ><a href="#insights">Perspectives</a></li>
			</ul>  
		</div>
	   </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时删除类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();
        });
    }
}