I have this jquery function:
$(window).scroll(function () {
if ($(window).scrollTop() > offset.top) {
$("#sidebar").css("marginTop", $(window).scrollTop.length - offset.top);
$("#sidebar").css({ opacity: 0.2 });
$("#sidebar").mouseenter(function () {
$("#sidebar").css({ opacity: 1 })
});
$("#sidebar").mouseleave(function () {
$("#sidebar").css({ opacity: 0.2 })
});
} else {
$("#sidebar").css("marginTop", "0");
$("#sidebar").css({ opacity: 1 })
$("#sidebar").mouseleave(function () {
$("#sidebar").css({ opacity: 1 })
});
};
});
second function:
$(document).ready(function () {
$('#account-trigger').click(function () {
$(this).next('#login-content').slideToggle();
$(this).toggleClass('active');
if ($(this).hasClass('active'))
$(this).find('span').html('▲')
else
$(this).find('span').html('▼')
})
$('#cart-trigger').click(function () {
$(this).next('#cart-content').slideToggle();
$(this).toggleClass('active'); if ($(this).hasClass('active')) $(this).find('span').html('▲')
else $(this).find('span').html('▼')
});
});
In the first function, i am trying to keep my #sidebar afloat at scroll,in the second function there is #sidebar which contains the menu that has the #account-trigger & #cart-trigger. #account-trigger & #cart-trigger opens up their sub menu respectively, on click.
The problem is when I click on the #account-trigger or #cart-trigger my window scroll automatically goes to top. There is no problem when the scroll is at top, indicating that the first function is working fine.
How it should work is when i scroll the content the sidebar should come to the top and the opacity should decrease but on hover the sidebar opacity should reset to 1 and when clicked on the menu inside the sidebar, it should open menu there itself.
The answer is: instead of putting # in href, when i put
javascript:void(0); it worked. thanx @mandeep it was pending from a
long time.
Instead of putting # in href, when i put javascript:void(0); it worked. thanx @mandeep it was pending from a long time.