user1881845
user1881845

Reputation: 371

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

Upvotes: 1

Views: 16165

Answers (2)

user4498712
user4498712

Reputation:

you can use the js code like this

  var wrap = $("#wrap");    
  wrap.on("scroll", function(e) {  
    if (this.scrollTop > 100) {
       wrap.addClass("class_name_of_div");
    } else {
       wrap.removeClass("class_name_of_div");
    }
});

and in .CSS

.class_name_of_div{
    position: fixed;
        top: 10px;
}

try this will work

Upvotes: 2

Noman Ur Rehman
Noman Ur Rehman

Reputation: 6957

Here is a detailed tutorial on this.

I am sure this will help.

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

Upvotes: 7

Related Questions