user3386779 user3386779 - 4 months ago 18
jQuery Question

checking both scrollTop and id offset for sticky menu in single condition

I want to check the scroll position is greater than 350 and menuSticky offset position is 92 in same condition.that condition is not working.I gave my piece of code



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





updated



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

In your block of code have a condition to remove class menuSticky when scroll position less than 350px. So it will be a case you try to get offset top from an undefined variable menu.

To fix your issue, check menuSticky is existing before doing further.

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