浮動DIV（）私は浮動div要素を設計し、その完璧に働い

Question

こんにちは友人が、原因私は私のコードでposition:relativeまたはposition:absoluteを使用したくないいくつかの理由に

$(window).scroll(function() { 

     var topWindowPosition = $(window).scrollTop(); 
     var leftWindowPosition = $(window).scrollLeft(); 
     var topLeftNavHeight = 200; 
     if (topWindowPosition >= topLeftNavHeight) { 
      $("#scroll").css({ top: topWindowPosition - topLeftNavHeight, left: 0, position: 'relative' }); 
     } else { 
      $("#scroll").css({ top: 0, left: 0, position: 'relative' }); 
     } 
     $("#scroll").forceRedraw(); 
    }); 

デモはここ

http://jsfiddle.net/9E225/1/

私は私を助けてください位置を使用せずに同じ効果を作ることができます。

Answer 1

確かに事前に

おかげで、ちょうどmarginsの代わりpositions使用します。例：

if (topWindowPosition >= topLeftNavHeight) { 
    $("#scroll").css({ marginTop: topWindowPosition - topLeftNavHeight, marginLeft: 0}); 
} else { 
    $("#scroll").css({ marginTop: 0, marginLeft: 0 }); 
} 

jsFiddle：http://jsfiddle.net/9E225/2/

Answer 2

私はあなたがこのアプローチについてどのように感じているか分かりません。それは、スクロール要素を超えたときに要素を所定の位置にスナップし、戻るときに右にスナップします。このアプローチの主な利点は、#scroll要素が「ジャンプ」して、起動されるすべてのスクロールイベントで自身を再配置しないということです。

Example |コード

var $el = $("#scroll"); 
var original_top = $el.position().top; 

$(window).scroll(function() { 
    //Scrolled past element 
    if($(window).scrollTop() >= original_top){ 
     //Add hooked element, if it's not already hooked 
     if(!$el.hasClass("hooked")) $el.addClass("hooked"); 
    }else if($(window).scrollTop() <= original_top){ 
     //Scrolled up before element, remove hooking and return back to normal 
     if($el.hasClass("hooked")) $el.removeClass("hooked"); 
    } 
}); 

CSSまた

.hooked{ 
    position: fixed; 
    top: 0; 
    left: 0; 
} 

、私はthis "JQuery Waypoints" libraryをご覧になることをお勧め。上記のコードと同じ方法で動作しますが、はるかに機能が豊富です。 :)