Her iki öğenin aynı anda sonlanabilmesi için başka bir öğenin kaydırma hızı için çarpma katsayısı nasıl hesaplanır (görünümün üst kısmı)

Question

Makalenin ana içeriğinden daha yavaş bir hızda kenar çubuğu kaydırmaya sahip olmaya çalışıyorum Böylece görüntü daha uzun süre kalacaktır. Öğe, ekranın üstüne ulaştığında kilitlenir.

Buna benzer yaklaşımlar gördüm, ancak genellikle sabit konumlandırılmış elemanlara dayanıyorlar.

Nasıl davranması gerektiğini görmek için altta JSFiddle örneğine bakın.

HTML

</div> 
<div class="container"> 
    <div class="main"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
    </div> 
    <div class="sidebar"> 
    1 
    <br />2 
    <br />3 
    <br />4 
    <br />5 
    <br />6 
    <br />7 
    <br />9 
    <br />10 
    <br />1 
    <br />2 
    <br />3 
    <br />4 
    <br />5 
    <br />6 
    <br />7 
    <br />9 
    <br />10 
    <br /> 
    <br />4 
    <br />5 
    <br />6 
    <br />7 
    <br />9 
    <br />10 
    <br /> 
    <div class="data"> 
     0 
    </div> 
    <br /> END 
    </div> 
</div> 
<div class="footer"> 
</div> 

CSS

.header { 
    width: 100%; 
    min-height: 300px; 
} 
.container { 
    margin: 0 auto; 
    width: 80%; 
    overflow:hidden; 
    background-color: #FF00FF; 
    display: block; 
} 
.main { 
    width: 65%; 
    float: left; 
    min-height: 800px; 
    background-color: #00ff00; 
} 
.sidebar { 
    width: 30%; 
    float: right; 
    min-height: 400px; 
    background-color: #ff0000; 
} 
.container.fixed .sidebar {} 
.footer { 
    clear: both; 
    min-height: 2000px; 
    width: 100%; 
} 

JS

$(document).ready(function() { 
    $(window).scroll(function() { 
     var sb = $('.sidebar'); 
     var mn = $('.main'); 
     var cn = $('.container'); 
     var height = $(window).height(); 
     var mnStart = mn.offset().top; 
     var mnHeight = mn.height(); 
     var sbHeight = sb.height(); 
     var sbLock = cn.height() - sb.height(); 
     var scrolled = $(window).scrollTop(); 
     var sbScroll = -(scrolled - mnStart) * ((height - mnHeight)/(height - sbHeight)); 
     if (scrolled >= mnStart && sbScroll <= sbLock) { 
     sb.css({ 
      transform: 'translate3d(0,' + sbScroll + 'px,0' 
     }); 
     } else if (scrolled < mnStart){ 
     sb.css({ 
      transform: 'translate3d(0,' + 0 + 'px,0' 
     }); 
     } else if (sbScroll > sbLock){ 
     sb.css({ 
      transform: 'translate3d(0,' + sbLock + 'px,0' 
     });   
     } 
    }); 
    }); 

ise Bu fiddle JSFiddle (short main content)'a bir göz atın ve bu JSFiddle (long main content) ile karşılaştırın, betiğin gerçekten ana içerik uzunluğunun değişimi ile iyi çalışmadığını görebilirsiniz.

Ana içeriğiyle aynı alt konuma ulaşana kadar kenar çubuğunu kolayca kaydırmak için ihtiyacım olan çarpma faktörünü nasıl hesaplayabildiğimi anlamaya çalışıyorum. Eğer örnekte gördüğünüz gibi 1.

Answer 1

Bu işin başından itibaren tekrar başladı ve ihtiyacım olan bir çözüm buldu.

Başkalarının iyi kullanabileceğini düşündüm.

HTML

<div class="header"> 
</div> 
<div class="container"> 
    <div class="main"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
    </div> 
    <div class="sidebar"> 
    1 
    <br />2 
    <br />3 
    <br />4 
    <br />5 
    <br />6 
    <br />7 
    <br />8 
    <br />9 
    <br />10 
    <br />11 
    <br />12 
    <br />13 
    <br />14 
    <br />15 
    <br />16 
    <br />17 
    <br />18 
    <br />19 
    <br />20 
    <br />21 
    <br />22 
    <br />23 
    <br />24 
    <br />25 
    <br />26 
    <br />27 
    <br />28 
    <br />29 
    <br />END 
    </div> 
</div> 
<div class="footer"> 
</div> 
</div> 

Bildiğim kadarıyla CSS

.header { 
    width: 100%; 
    min-height: 300px; 
} 

.container { 
    margin: 0 auto; 
    width: 80%; 
    overflow: hidden; 
    background-color: #FF00FF; 
    display: block; 
} 

.main { 
    width: 65%; 
    float: left; 
    min-height: 8000px; 
    background-color: #00ff00; 
} 

.sidebar { 
    width: 30%; 
    float: right; 
    min-height: 400px; 
    background-color: #ff0000; 
} 

.container.fixed .sidebar {} 

.footer { 
    clear: both; 
    min-height: 2000px; 
    width: 100%; 
} 

JS

$(document).ready(function() { 
    $(window).scroll(function() { 
     slowScroll('.main','.sidebar'); 
    }); 
    function slowScroll(obj1, obj2) { 
     var long, short; 
     if ($(obj1).height() > $(obj2).height()) { 
     long = $(obj1); 
     short = $(obj2); 
     } else { 
     long = $(obj2); 
     short = $(obj1); 
     } 
     var lHeight = long.height(); // Height of longest element 
     var sHeight = short.height(); // Height of shortest element 
     var sLock  = lHeight - sHeight; // What position from top the shortest element should lock in at 
     var startPos = long.offset().top; // The start position relevant to document (offset from top) 
     var scrolled = $(window).scrollTop(); // Current value scrolled from top 
     var lScrolled = ((scrolled - startPos) >= 0) ? (scrolled - startPos) : 0;// Current value scrolled from start of longest element 
     var scrollX = sLock/lHeight; // Scroll multiplier 
     var sPos = ((lScrolled * scrollX) <= sLock) ? (lScrolled * scrollX) : sLock;// Scroll position for the shortest element 
     short.css({transform: 'translate3d(0,' + sPos + 'px,0'}); 
    } 
}); 

bunu testet ettik olarak şimdi wo görünüyor Hem ana hem de kenar çubuğu elemanının değişen yüksekliklerine sahip rk Burada JSFiddle'da görebileceğiniz gibi.

Answer 2

ben alabilir iyi şudur:

$(window).scroll(function(e){ 
parallax(); 
}); 
function parallax(){ 
var scrolled = $(window).scrollTop(); 
$('.main').css('top',-(scrolled*0.1)+'px'); 
$('.sidebar').css('top',-(scrolled*0.2)+'px'); 
} 

bu çok minimalist bir yaklaşım olduğunu unutmayın ama kenar çubuğu daha uzun süre görünümünde kalır, etrafında oynayabilir fonksiyonlar parametreleri ile ve ne olduğunu görmek ve evet, sabit css pozisyonu veya bu işe yaramaz. Bu düzenli bakmak için bazı css kurallarına ihtiyaç duyar, ancak JS işlevselliği çalışır.

http://codepen.io/damianocel/pen/NNwmRm

Başka bir seçenek sadece sidebart üzerinde bir zamanlayıcı ayarlamak ve giriş ve çıkış solmaya veya belirli bir süre sonra dönüştürmek ve burada olduğu gibi konumuna ilerlemek Makle için olacaktır:

http://codepen.io/damianocel/pen/PZQVOR