用戶向下滾動x後的側欄移動量

讓我們直接看一下：當用戶滾動x的數量時，我希望側欄開始移動..現在，一旦側欄達到其結尾，我希望它保持固定並滾動到頁腳。這是我得到的。用戶向下滾動x後的側欄移動量

這裏是我的javascript：

$(document).ready(function() { 
// Cache selectors for faster performance. 
var $window = $(window), 
    $sidebar = $('#anchor'), 
    $sidebarAnchor = $('#right'); 

// Run this on scroll events. 
$window.scroll(function() { 
    var window_top = $window.scrollTop(); 
    var div_top = $sidebarAnchor.offset().top; 
    if (window_top > div_top) { 
    // Make the div sticky. 
    $sidebar.addClass('stick'); 
    $sidebarAnchor.height($sidebar.height()); 
    } 
    else { 
     // Unstick the div. 
     $sidebar.removeClass('stick'); 
     $sidebarAnchor.height(0); 
    } 
}); 
});

出於某種原因的jsfiddle沒有顯示什麼JavaScript是幹什麼的，但如果您的PC上運行它，你可以看到。每當用戶滾動通過側邊欄的結尾，側邊欄不會向下滾動，就像它假設，而是跳轉到頁面的右側...

所以我的問題是這個：我如何阻止邊欄跳到頁面的一側，並將其保留在父DIV的限制範圍內？

乾杯！

來源

2013-10-28 Pixel Reaper

你忘了在你的jsfiddle中包含jQuery。試圖解決JavaScript問題時，首先要開始檢查控制檯中的錯誤。 –

好吧我更新了 –

用更新的小提琴鏈接查看答案。 –

請勿在stick課上做right : 0課。在固定元素中，位置屬性是相對於視口的。

https://developer.mozilla.org/en-US/docs/Web/CSS/position#Fixed_positioning

來源

2013-10-28 17:14:14 lxe

我試圖擺脫右：0;但如果你這樣做，那麼側欄縮小到大約一半的大小，並推到右側容器的左側。任何修復？順便說一句 - 我修復了Jsfiddle，所以你可以看看 –

@PixelReaper你可能需要爲你的邊欄和父容器分配一個像素寬度。 – lxe

謝謝我的男人！它做到了 –

用戶向下滾動x後的側欄移動量

回答

相關問題