javascriptjquerycss

How to stop scrolling of a div when it reaches on a specific div?


After clicking on a button im getting a pop up. What i want to achieve is to stop scrolling of this pop up when it reaches to the menu of my website.

here is my code

<div id="dialog_box" class="dbox" style="display: none; position: fixed;                
right: 192px ! important; z-index: 1000; top: 0px;">

I want to stop scrolling of #dialog_box when it reaches to #menu id div using jquery or java script.

I have tried this so far but its not working

jQuery(window).scroll(function(){
jQuery('#dialog_box').scrollTo('#menu'); // i would like to stop scrolling of dialog_box when it meet the #menu id div.
jQuery("#dialog_box").css("top", Math.max(0, 162 -    
jQuery(this).scrollTop()));  // i have tried this to position dialog_box from top but its not giving me the exact result.
});
});

Solution

  • Here is a detailed tutorial on this.

    I am sure this will help.

    http://css-tricks.com/scroll-fix-content/