如何創建一個類似Facebook的粘杆

這裏看看這個視頻，看看我真正的意思(Video)如何創建一個類似Facebook的粘杆

現在，當我滾動，你會發現左邊欄。當我滾動到酒吧的底部時，酒吧變得粘稠，無論我滾動多遠，我立即向上滾動酒吧，直到它再次到達酒吧的頂部。

到目前爲止，我確實想出了一個粘性酒吧，但如果我滾動酒吧滾動，直到它到達頂部就像Facebook風格。

這是到目前爲止我的代碼

function stickDown($el, margin, position){ 

    var elPos = $el.offset().top + $el.height() + margin; 

    $(window).scroll(function(){ 
     var winS = $(window).scrollTop(); 
     var winH = $(window).height(); 

     if(winS + winH > elPos) 
      $el.attr('style', 'position:fixed;bottom:'+margin+'px;top:auto;'); 
     else 
      $el.attr('style', 'position:'+position+';');   
    }) 

} 

$(document).ready(function(){ 
    stickDown($('div#bar'), 10, 'relative'); 
})

來源

2017-07-26 KANAYO AUSTIN KANE

我已經想通了。這裏是我的新代碼

var winScrTop = 0, 
oldScrTop = 0; 
$(window).scroll(function(){ 
    winScrTop = $(this).scrollTop(); 
    winH = $(this).height(); 
    $bar = $('div#bar'); 
    barTop = $bar.offset().top; 
    barH = $bar.height(); 
    margin = 10; 
    scrH = winScrTop + winH; 
    topMar = barTop - winScrTop; 
    allbar = barTop + barH + margin; 
    if(winScrTop > oldScrTop){ 
     if(scrH > allbar && topMar < 100){ 
      $bar.css({ 
       position:'fixed', 
       top: topMar+'px' 
      }) 
     } else { 
      $bar.css({ 
       position:'absolute', 
       top: barTop+'px' 
      }) 
     } 
    } else { 
     if(scrH > allbar){ 
      nin = winScrTop - barTop; 
      $bar.css({ 
       position:'absolute', 
       top: nin+'px' 
      }) 
     } 
     if(topMar > 99){ 
      $bar.css({ 
       position:'fixed', 
       top: '100px' 
      }) 
     } 
    } 
    oldScrTop = winScrTop; 
})

來源

2017-07-27 08:51:38

如何創建一個類似Facebook的粘杆

回答

相關問題