javascript - una - error#¡div/0 en excel
Corregir div cuando el navegador se desplaza hacia él (4)
Si se desplaza hacia abajo en la página en la siguiente URL, el div ''compartir'' se bloqueará en el navegador:
http://knowyourmeme.com/memes/pizza-is-a-vegetable
Supongo que están aplicando un position: fixed; atributo. ¿Cómo se puede lograr esto con jQuery?
En jQuery para diseñadores hay una publicación bien escrita sobre esto, este es el fragmento jQuery que hace la magia. simplemente reemplace #comment con el selector del div que desea flotar.
Nota: Para ver el artículo completo, vaya aquí: 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'');
}
});
});
Hice una combinación de las respuestas aquí, tomé el código de @Julian y las ideas de los demás, me parece más claro, esto es lo que queda:
fiddle fiddle
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);
}
Puedes encontrar un ejemplo a continuación. Básicamente, adjuntas una función al evento scroll window y scrollTop propiedad scrollTop y, si está por encima del umbral deseado, aplicas position: fixed y algunas otras propiedades 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>
(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);
y luego hacer cualquier div como flotante fijo llamando
$(''#id of the div'').floatingFixed();