Reputation: 371
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
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
Reputation: 6957
Here is a detailed tutorial on this.
I am sure this will help.
http://css-tricks.com/scroll-fix-content/
Upvotes: 7