Fix div khi cuộn của trình duyệt để nó

Question

Nếu bạn cuộn xuống trang trong URL sau, 'chia sẻ' div sẽ khóa vào trình duyệt:

http://knowyourmeme.com/memes/pizza-is-a-vegetable

Tôi giả định họ đang áp dụng một position: fixed; thuộc tính. Làm thế nào điều này có thể đạt được với jQuery?

Answer 1

Bạn có thể tìm thấy một ví dụ dưới đây. Về cơ bản, bạn đính kèm một hàm vào sự kiện scroll của window và theo dõi scrollTop thuộc tính và nếu nó cao hơn ngưỡng mong muốn, bạn áp dụng position: fixed và một số thuộc tính css khác.

jQuery(function($) { 
 
    function fixDiv() { 
 
    var $cache = $('#getFixed'); 
 
    if ($(window).scrollTop() > 100) 
 
     $cache.css({ 
 
     'position': 'fixed', 
 
     'top': '10px' 
 
     }); 
 
    else 
 
     $cache.css({ 
 
     'position': 'relative', 
 
     'top': 'auto' 
 
     }); 
 
    } 
 
    $(window).scroll(fixDiv); 
 
    fixDiv(); 
 
});

body { 
 
    height: 2000px; 
 
    padding-top: 100px; 
 
} 
 
#getFixed { 
 
    color: #c00; 
 
    font: bold 15px arial; 
 
    padding: 10px; 
 
    margin: 10px; 
 
    border: 1px solid #c00; 
 
    width: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<div id="getFixed">This div is going to be fixed</div>

Answer 2

Trên jQuery cho các nhà thiết kế, có một bài viết được viết tốt về điều này, đây là đoạn mã jQuery thực hiện phép thuật. chỉ thay thế #comment bằng bộ chọn của div mà bạn muốn thả nổi.

Lưu ý: Để xem toàn bộ bài viết hãy vào đây: http://jqueryfordesigners.com/fixed-floating-elements/

$(document).ready(function() { 
    var $obj = $('#comment'); 
    var top = $obj.offset().top - parseFloat($obj.css('marginTop').replace(/auto/, 0)); 

    $(window).scroll(function (event) { 
    // what the y position of the scroll is 
    var y = $(this).scrollTop(); 

    // whether that's below the form 
    if (y >= top) { 
     // if so, ad the fixed class 
     $obj.addClass('fixed'); 
    } else { 
     // otherwise remove it 
     $obj.removeClass('fixed'); 
    } 
    }); 
}); 

Answer 3

(function($) { 
    var triggers = []; 
    $.fn.floatingFixed = function(options) { 
    options = $.extend({}, $.floatingFixed.defaults, options); 
    var r = $(this).each(function() { 
     var $this = $(this), pos = $this.position(); 
     pos.position = $this.css("position"); 
     $this.data("floatingFixedOrig", pos); 
     $this.data("floatingFixedOptions", options); 
     triggers.push($this); 
    }); 
    windowScroll(); 
    return r; 
    }; 

    $.floatingFixed = $.fn.floatingFixed; 
    $.floatingFixed.defaults = { 
    padding: 0 
    }; 

    var $window = $(window); 
    var windowScroll = function() { 
    if(triggers.length === 0) { return; } 
    var scrollY = $window.scrollTop(); 
    for(var i = 0; i < triggers.length; i++) { 
     var t = triggers[i], opt = t.data("floatingFixedOptions"); 
     if(!t.data("isFloating")) { 
     var off = t.offset(); 
     t.data("floatingFixedTop", off.top); 
     t.data("floatingFixedLeft", off.left); 
     } 
     var top = top = t.data("floatingFixedTop"); 
     if(top < scrollY + opt.padding && !t.data("isFloating")) { 
     t.css({position: 'fixed', top: opt.padding, left: t.data("floatingFixedLeft"), width: t.width() }).data("isFloating", true); 
     } else if(top >= scrollY + opt.padding && t.data("isFloating")) { 
     var pos = t.data("floatingFixedOrig"); 
     t.css(pos).data("isFloating", false); 
     } 
    } 
    }; 

    $window.scroll(windowScroll).resize(windowScroll); 
})(jQuery); 

và sau đó thực hiện bất kỳ div như thả nổi cố định bằng cách gọi

$('#id of the div').floatingFixed(); 

nguồn: https://github.com/cheald/floatingFixed

Answer 4

tôi đã thực hiện một kết hợp của các câu trả lời ở đây, mất mã của @Julian và ý tưởng từ những người khác, dường như rõ ràng hơn đối với tôi, đây là những gì còn lại:

fiddlehttp://jsfiddle.net/wq2Ej/

jquery

//store the element 
var $cache = $('.my-sticky-element'); 

//store the initial position of the element 
var vTop = $cache.offset().top - parseFloat($cache.css('marginTop').replace(/auto/, 0)); 
    $(window).scroll(function (event) { 
    // what the y position of the scroll is 
    var y = $(this).scrollTop(); 

    // whether that's below the form 
    if (y >= vTop) { 
     // if so, ad the fixed class 
     $cache.addClass('stuck'); 
    } else { 
     // otherwise remove it 
     $cache.removeClass('stuck'); 
    } 
    }); 

css:

.my-sticky-element.stuck { 
    position:fixed; 
    top:0; 
    box-shadow:0 2px 4px rgba(0, 0, 0, .3); 
}