在單個條件下檢查粘滯菜單的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();
        });
    }
}