How to fix a div to top of the screen when it reach to top of the screen

JavaScript
1

I have a problem with the sticky header. When I scroll the web page normally then its working fine but the problem is when I open a hidden div (when clicking on view more of Similar Product div then it opens a Similar Product slider div ) then the sticky header takes the previous height and goes to the top of the page but the menu tab section is much below than header.
I am not able to understand that what is the problem?
I attached the sample code also and JS for this is written in product.js at the top
Please help me.
.Thank you

I am using this Jquery code for fixing the header at the top when it reaches to the top of the window.

$(document).ready(function() {
	var stickySidebar = $('#sub-menu').offset().top;
	$(window).scroll(function() {  
		if ($(window).scrollTop() > stickySidebar) {
			$('#sub-menu').addClass('affix');
		}
		else {
			$('#sub-menu').removeClass('affix');
		}  
	});
});

sample_code.zip (1.7 MB)

2

Looks at the Waypoints plugin

http://imakewebthings.com/waypoints/shortcuts/sticky-elements/

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.