修復DIV當瀏覽器滾動到它

Question

如果您在下面的網址向下滾動頁面，在「共享」的div將鎖定到瀏覽器：

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

我假設他們應用position: fixed;屬性。這怎麼能用jQuery來實現？

Answer 1

您可以在下面找到一個例子。基本上，您將一個函數附加到window的scroll事件和跟蹤scrollTop屬性，如果它高於所需閾值，則應用position: fixed和其他一些CSS屬性。

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

在設計人員的jQuery上，有一篇關於此的寫得很好的文章，這是jQuery代碼片段。只需將#comment替換爲您要浮動的div的選擇器即可。

注：要查看整篇文章去這裏：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); 

，然後作出任何股利作爲浮動的固定致電

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

來源：https://github.com/cheald/floatingFixed

Answer 4

我做了回答的混合這裏，花了@ Julian的代碼和其他人的想法，似乎更清晰的對我來說，這是剩下的：

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); 
}