我想在stackoverflow的Ask Question页面上执行类似“如何格式化”的操作。
最初div
有position:relative
。当div
的任何部分不在屏幕上时,它会变为position:fixed
。
如何实施?
编辑:更准确地说,我想要的是:
开始时,div
是窗口顶部的Xpx
当我向下滚动(X + Y)px时,通常会隐藏div
的顶部Ypx部分。
但我希望将整个div
修复到窗口顶部。即{position:fixed; top:0}
如果我向上滚动,div
将从窗口顶部返回到Xpx。
更准确地说,我想要一个更漂亮的代码:
$(document).ready(function()
{
var e = $('#myDiv');
var offsetTop = e.offset().top;
var positionTop = e.position().top;
$(window).scroll(function() {
if($(window).scrollTop() > offsetTop) {
e.css({'position' : 'fixed', 'top' : '0px'});
}
else {
e.css({'position': 'relative', 'top': positionTop});
}
});
});
答案 0 :(得分:2)
我写了一段真正有效的代码:
$(document).ready(function()
{
var e = $('#myDiv');
var offsetTop = e.offset().top;
var positionTop = e.position().top;
$(window).scroll(function(event) {
if($(window).scrollTop() + 20 > offsetTop) {
e.css({'position' : 'fixed', 'top' : '20px'});
}
else {
e.css('position', 'relative');
e.css('top', positionTop);
}
});
});
但我想知道是否有更好的解决方案。
答案 1 :(得分:1)
$(document).ready(function()
{
var e = $('#myDiv');
var jWindow = $(window);
var offsetTop = e.offset().top;
var positionTop = e.position().top;
jWindow.scroll(function()
{
if(jWindow.scrollTop() > offsetTop)
e.css({'position':'fixed', 'top':0});
else
e.css({'position':'relative', 'top':positionTop});
});
});
答案 2 :(得分:0)
我在上面修改了@ lai-yu-hsuan的代码而且它没有用。如果您向上滚动,粘性元素将在初始滚动后消失,但这对我来说是有效的。我希望这可以帮助别人!请注意,我将粘性元素更改为类," sticky-top"所以它可以应用于多个容器。
jQuery(document).ready(function()
{
var e = jQuery('.sticky-top');
var offsetTop = e.offset().top;
var positionTop = e.position().top;
var positionLeft = e.position().left;
var stickyWidth=e.width();
var stickyHeight=e.height();
jQuery(window).scroll(function(event) {
if(jQuery(window).scrollTop() + 20 > offsetTop) {
e.css({'position' : 'fixed', 'top' : '20px','left':positionLeft+'px'});
e.css({'width':stickyWidth+'px','height':stickyHeight+'px'});
}
else {
e.css('position', 'relative');
e.css('top', '');
e.css('left','');
}
});
});