Jquery Waypoints Yenile

Question

Sayfayı aşağıya kaydıran yapışkan bir div oluşturmak için yolnoktası kullanan bir sayfada çalışıyorum: ana div'in altına erişene kadar sabit. Kullanılan kod imi $ .waypoints ('refresh') olarak adlandırılana kadar çalışır, sonra yapışkan div sayfanın başına geri atlar ve sabit konumunu kaybeder.

İşte kod: #leftCol sayfa aşağı kayar ve #content üst div div olduğunu

$('#content').waypoint(function(event, direction){ 
if (direction === 'down') { 
    $(this).removeClass('sticky').addClass('bottomed'); 
} 
else { 
    $(this).removeClass('bottomed').addClass('sticky'); 
} 
}, { 
    offset: function() { 
    return $('#leftCol').outerHeight() - $('#content').outerHeight(); 
} 

}).find('#leftCol').waypoint(function(event, direction) { 
    $(this).parent().toggleClass('sticky', direction === "down"); 
    event.stopPropagation(); 
     });   

.

Ben css geçerli:

#content { 
width: 975px; 
height: auto; 
position: relative; 
margin-top: 10px; 
margin-bottom: 20px; 
min-height: 800px; 
} 

#leftCol { 
position: absolute; 
width: 974px; 
} 

.sticky #leftCol { 
position:fixed !important; 
top:0 !important; 
left: 50% !important; 
width: 974px !important; 
margin-left: -488px; 
} 

.bottomed #leftCol { 
position: absolute !important; 
bottom: 0px; 
} 

denir $ .waypoints ('yenileme') çok takdir zaman #leftCol konumunu korumak için nasıl bir fikir.

Teşekkür

Answer 1

, hiç geçiş noktası olarak fixed pozisyon elemanı kullanmayan yok etmeyin. GitHub'taki aşağıdaki kapalı sorunların tümüne bakın: #64, #44, #32, #26, #24, #13, #10, #4.

Bu, Waypoint'lerle ilgili en kolay anlaşılan şeydir ve Waypoint'lerin yeterince iyi nasıl çalıştığını bildirmemede kesinlikle benim hatamdır. Eklentinin sonraki yinelemesinde bunu daha açık yapmayı planlıyorum.

Merak eden herkes için: Yol noktaları, bir öğenin sayfa ofsetine bakarak çalışır. Ancak, kullanıcı kaydırdıkça sabit konum öğesinin sayfa ofseti sürekli olarak değişmektedir. Bu nedenle, yenileme yapıldığında, manuel olarak, başka bir yol noktası ekleyerek veya tarayıcıyı yeniden boyutlandırarak, o yolnoktanın konumu, kullanıcının o anda sayfada kaydırdığı yerde eşleşecek şekilde değişir. İstediğiniz, belge akışını yol noktası olarak bırakmayan normal bir statik konum elemanıdır. Yol Noktaları proje sitesinde verdiğim örnekte, yol noktası yerinde kalan bir sarıcıdır, nav ise CSS ile sabit konumlandırmayı kaybeder ve kaybeder. Sezgisel göründüğü için OP'in burada yaptığı şeyi yapmak için sayfa ofsetlerini ve CSS'yi anlamayan biri için çok kolay. Yine bu, gelecekte doğrudan belgelerde/örneklerde ele alınacak bir şeydir.