miễn phí-Scrolling Chú ý Sidebar Without jQuery

Question

Tôi đang cố gắng để đạt được những gì được trình bày trong câu hỏi Stack Overflow này, mà không phụ thuộc jQuery: stackoverflow.com/questions/18358816/sticky-sidebar-stick-to-bottom-when-scrolling-down-top-when-scrolling-up

Nhưng tôi không muốn chiếm quyền điều khiển câu hỏi đó.

Về cơ bản, tôi muốn nội dung trong thanh bên được cuộn độc lập nhưng được cố định khi chế độ xem đạt đến cuối nội dung thanh bên trên cuộn.

Chướng ngại vật chính của tôi dường như không thể tính biến số elementTop khi thanh bên được đặt hoàn toàn và giữa đầu và cuối của vùng chứa mà tôi đã đặt ở độ cao đầy đủ.

Full mã bên dưới:

var StickySidebar = function(eventie) { 

var container, containerTop, containerHeight, // container 
element, elementTop, elementHeight, elStyle, // element 
viewportTop = -1, viewportHeight, documentTop, // viewport 
lastViewportTop, scrollingDown, top = false , bottom = false,// sticky vars 

scroll = window.requestAnimationFrame || 
     window.webkitRequestAnimationFrame || 
     window.mozRequestAnimationFrame || 
     window.msRequestAnimationFrame || 
     window.oRequestAnimationFrame || 
     function(callback){ window.setTimeout(callback, 1000/60); }, 

options = { 
    container : document.querySelector('.sidebar-container'), 
    element : document.querySelector('.sidebar'), 
    sidebarClass : 'sidebar', 
    bottomOffset : -15, 
    topOffset: 90, 
}, 

_updateValue = function() { 
    viewportHeight = window.innerHeight; 
}, 

_offset = function(obj) {  
    var ol = ot = 0; 
    if (obj.offsetParent) { 
     do { 
      ol += obj.offsetLeft; 
      ot += obj.offsetTop; 
     } while (obj = obj.offsetParent); 
    } 
    return { 
     left: ol, 
     top: ot 
    }; 
}, 


init = function(){ 
    if(options.element !== null) { 

     container = options.container; 
     containerTop = offset(container).top; 
     containerHeight = container.clientHeight; 

     element = options.element; 
     elementTop = offset(element).top; 
     elementHeight = options.element.clientHeight; 

     lastViewportTop = window.scrollY; 
     viewportHeight = window.innerHeight; 

     eventie.bind(document, "scroll", _loop); 
     eventie.bind(window, "resize", _updateValue); 

    } 
}, 

_loop = function() { 
    if (viewportTop == window.pageYOffset) { 
     scroll(_loop); 
     return false; 
    } else viewportTop = window.pageYOffset; 

    _updateValue(); 

    var viewportBottom, elementTooBig, topOffset; 

    elementTop = offset(element).top; 

    elementHeight = element.clientHeight; 
    containerHeight = container.clientHeight; 
    scrollingDown = viewportTop > lastViewportTop; 
    elementTooBig = elementHeight > viewportHeight; 

    console.log("elementTop : " + elementTop); 
    console.log("viewportTop : " + viewportTop); 

    if (scrollingDown) { 

     if (viewportTop + viewportHeight >= elementTop + elementHeight) { 
      element.setAttribute('style','position:fixed; bottom:30px;'); 
     } else { 
      element.setAttribute('style','position:absolute; top:'+ elementTop +'px;'); // issue 1 
    } 

    if (viewportTop + viewportHeight > containerTop + containerHeight) { 
     element.setAttribute('style','position:absolute; bottom:0;'); 
    } 

} else { 

    if (viewportTop < containerTop - 60) { 
     element.removeAttribute('style'); 
     return; 
    } 

    if (viewportTop <= elementTop) { 
     element.setAttribute('style','position:fixed; top:90px;'); 
    } else { 
     element.setAttribute('style','position:absolute; top:'+ elementTop +'px;'); 
     elementTop = viewportTop + elementTop; 
    } 

} 

lastViewportTop = viewportTop; 

}; 


return { 
    init: init 
}; 

}(eventie); 

Tôi đã cố gắng để giải quyết vấn đề này trong một vài tuần nay, và nó đã được lái xe cho tôi điên. Mọi sự trợ giúp sẽ rất được trân trọng.

Answer 1

Nếu bạn chỉ đang cố gắng đạt được kết quả mong muốn không nhất thiết phải tạo ra chính bản thân bạn - tốt, có nhiều thư viện JavaScript cung cấp.

Ví dụ: Stickyfill thực sự là một polyfill cho position: sticky là natively supported only in Firefox 41+ and Safari 8+. Dưới đây là the demo với tất cả các loại dính mà bạn có thể tưởng tượng :)

P.S. Thoạt nhìn, bạn có thể nhận thấy một cái gì đó về jQuery ở đó, nhưng đó là JavaScript thuần túy và chỉ cần thêm một phần mở rộng jQuery.