JQuery floating div stop after scrolling down certain div

Please check this link

http://jsfiddle.net/sasindu555/xaYTt/

I want to stop floating special_features div after scrolling down stop div. How do th开发者_运维问答at. Please help me. Thanks.

---

I have modified your code above so it works smoothly and doesn't float over stop element. Also the code style has been improved.

var menu = "#menu",
        stop = '#stop';
    $(function(){
        var $menu = $(menu),
            $stop = $(stop),
            baseOffset = $menu.offset().top,
            stopOffset = $stop.offset().top;
        $(window).scroll(function () {  
            var newOffset = baseOffset + $(document).scrollTop();
            if($menu.offset().top < stopOffset || newOffset < stopOffset)
            {
                if (newOffset > stopOffset){
                    newOffset = stopOffset;
                }
                $menu.animate({top:newOffset},{duration:300,queue:false});  
            }
        });  
    }); 

http://jsfiddle.net/xaYTt/372/

---

Try the below code - It wroks as expected http://jsfiddle.net/sasindu555/xaYTt/

 var name = "#special_features";  
    var menuYloc = null;  

    $(document).ready(function(){  
        $(name).css("top", $("#start").offset().top - 10);
        menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))  
        $(window).scroll(function () {  
            var offset = menuYloc+$(document).scrollTop();  
            if(offset > $("#stop").offset().top){
                offset = $("#stop").offset().top - 10; 
            }
            else if(offset < $("#start").offset().top){
                offset = $("#start").offset().top - 10; 
            }
 offset = offset+"px";           $(name).animate({top:offset},{duration:500,queue:false});  
        });  
    });  

---

You can use offset().top in jquery to do something like this.

if($(name).offset().top < $(stop).offset().top || newOffset < $(stop).offset().top)
{    
     $(name).animate({top:newOffset},{duration:200,queue:false});  
}

Here's my attempt (it's not accurate).

http://jsfiddle.net/xaYTt/7/

EDIT: Wow the people at SE are fast...