JQuery плавающий div остановка после прокрутки вниз определенного div

Question

Пожалуйста, проверьте эту ссылку

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

Я хочу прекратить плавать special_features div после прокрутки вниз stop div.Как это сделать.Пожалуйста, помогите мне.Спасибо.

Answer 1

Я изменил ваш код выше, чтобы он работал плавно и не плавал над элементом остановки. Также был улучшен стиль кода.

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/

Answer 2

Вы можете использовать offset (). Top в jquery, чтобы сделать что-то вроде этого.

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

Вот моя попытка (она не точная).

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

РЕДАКТИРОВАТЬ: Wow люди в SE быстро ...

Answer 3

Попробуйте следующий код - он работает как ожидалось 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});  
        });  
    });