如何在滾動過去50％的物品時粘住div？

這可能是一個簡單的問題，但請幫助！我使用下面的代碼實施了粘性div，但我需要知道如何更改div「卡住」的位置？如何在滾動過去50％的物品時粘住div？

我想要的是我的div只有當它滾動的50％通過頂部時纔會卡住。目前它在到達頂部時卡住了，但我希望其中的50％在卡住之前保持滾動（粗略）。

$(document).ready(function() { 
    var s = $("#picture1"); 
    var pos = s.position();      
    $(window).scroll(function() { 
     var windowpos = $(window).scrollTop(); 
     //$("#header_left").html("Distance from top:" + pos.top + "<br />Scroll position: " + windowpos); 
     if (windowpos >= pos.top) { 
      s.addClass("stick"); 
     } else { 
      s.removeClass("stick"); 
     } 
     if (windowpos >= pos.top) { s.addClass("stick"); $("body").css("margin-top", s.height()); } else { s.removeClass("stick"); $("body").css("margin-top", 0); } 

    }); 
});

和CSS

.stick { 
    position:fixed; 
    top:0px; 
    /*_top: expression(ie6 = (document.documentElement.scrollTop + "px"));*/ 
    z-index: 1000; 
}

來源

2014-03-02 user3358264

變化windowpos >= pos.top到windowpos >= (s.height()/2) + pos.top

編輯

http://jsfiddle.net/BVK2q/

來源

2014-03-02 19:33:35 Anubhav

謝謝你，但當它得到的位置整個div消失！ – user3358264

我不確定..但嘗試刪除第二個if else語句..'margin-top'style可能會干擾 – Anubhav

是的，這似乎是與它有關，但如果我刪除該行，前50％被粘住的Div會被卡住（可能重複），並且身體的其他部分跳轉到填充固定div的空間，就好像它消失一樣。儘管我們處於正確的軌道！ – user3358264

SEE THE DEMO

只有當div上升50％時，div纔會獲得.stick風格。但是，如果您將fixed的頭寸應用於某個div，它會從正常佈局中跳出，並且失去了獲得任何保證金的能力。因此，在這種情況下，您必須將邊距或填充應用於身體，這也已完成。

無論如何，我只是稍微調整一下你的代碼，以顯示你如何得到你想要的。

$(document).ready(function() { 
var s = $("#picture1"), 
pos = s.position(), 
sHeight = s.height(); 

$(window).scroll(function() { 
    var windowpos = $(window).scrollTop(); 
    if (windowpos >= (sHeight/2) + pos.top) { 
     s.addClass("stick"); 
     $('body').css('paddingTop', sHeight + 60); 
    } else { 
     s.removeClass("stick"); 
     $('body').css('paddingTop', '0'); 
    } 
}); 
});

來源

2014-03-02 19:59:36 Morven

謝謝。但是，你如何讓它堅持只有50％.stick？所以它不會像你的演示中那樣跳回到100％ – user3358264

如何在滾動過去50％的物品時粘住div？

回答

相關問題