2016-07-15 34 views
0

粘菜單我要檢查的滾動位置大於350和menuSticky偏移位置是相同的condition.that條件92不working.I給我一段代碼檢查都scrollTop的和id抵消了單個條件

$(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>

回答

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(); 
     }); 
    } 
} 
+0

我試圖安慰menu.length這表明1時,它是secMenu menuSticky和0 secMenu..by使用這個,我試圖做我的邏輯,更新後 – user3386779

+0

工作fine.thanks .. – user3386779