फिक्स div ब्राउज़र स्क्रॉल

Question

आप निम्न URL में पृष्ठ नीचे स्क्रॉल, तो 'शेयर' div ब्राउज़र पर लॉक हो जाएगा:

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

मैं यह सोचते कर रहा हूँ कि वे एक position: fixed; आवेदन कर रहे हैं विशेषता। यह jQuery के साथ कैसे प्राप्त किया जा सकता है?

Answer 1

आप नीचे दिए गए एक उदाहरण मिल सकते हैं। असल में आप window के scroll ईवेंट पर एक फ़ंक्शन संलग्न करते हैं और scrollTop संपत्ति का पता लगाते हैं और यदि यह वांछित दहलीज से अधिक है तो आप position: fixed और कुछ अन्य सीएसएस गुणों को लागू करते हैं।

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 पर इसके बारे में एक अच्छी तरह लिखित पोस्ट है, यह जादू स्निपेट है जो जादू करता है। सिर्फ उस भाग के चयनकर्ता के साथ # टिप्पणी को प्रतिस्थापित करें जिसे आप फ़्लोट करना चाहते हैं।

नोट: देखने के लिए पूरे लेख यहां जाएं: 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); 

और फिर फोन करके तय अस्थायी रूप में किसी भी div बनाने

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

स्रोत: https://github.com/cheald/floatingFixed

Answer 4

मैं यहाँ जवाब का मिश्रण बना लिया @ जुलियन का कोड और दूसरों से विचार, मेरे लिए स्पष्ट लगता है, यह है कि क्या बचा है है:

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

सीएसएस:

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