Плавающий элемент с прокруткой с помощью jquery

Question

Я хочу, чтобы div перемещался со свитком. Он должен проходить параллельно с прокруткой. Я создал функцию, которая плавает над div, но она не параллельна прокрутке. fiddle

$(window).scroll(function(){ 
    var offset=$('div').offset().top 
    var top= $(window).scrollTop(); 
    var height= offset- top; 
    console.log(offset + 'offset') 
    console.log(top + 'top') 
    console.log(height); 

    if(top>57){ 
    $('div').animate({top:top},100) 
    } 

    //console.log($('div').offset().top) 

}) 

Answer 1

Try This

var offset = $("div").offset(); 
     var topPadding = 75; 
     $(window).scroll(function() { 
      if ($(window).scrollTop() > offset.top) { 
       $("div").stop().animate({ 
        marginTop: $(window).scrollTop() - offset.top + topPadding 
       }); 
      } else { 
       $("div").stop().animate({ 
        marginTop: 0 
       }); 
      }; 
     }); 

Answer 2

Я нашел ответ, проблема "позиция: исправлена". Теперь я использую «position: absolute», и он работает нормально. Положение фиксируется взятие координат из браузера верхних и позиции абсолютных взять координаты из документа верхней

код

var offset; 
$(function(){ 
offset=$('div').offset().top 
}) 

$(window).scroll(function(){ 
    var top= $(window).scrollTop()+50; 
console.log(top + 'top')  
    $('div').animate({top:top},50)  
}) 

fiddle demo