停止在页脚前移动div页面
我正在使用本教程http://jqueryfordesigners.com/fixed-floating-elements/使我的div在用户滚动时随页面移动。它的作用就像一个魅力,但直到你到达我的网页底部,div仍然是固定的位置,并仍然从他的父母div到footer。 的JavaScript:停止在页脚前移动div页面
$(document).ready(function() {
var top = $('#comment').offset().top - parseFloat($('#comment').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
$('#comment').addClass('fixed');
} else {
// otherwise remove it
$('#comment').removeClass('fixed');
}
});
});
CSS:
#comment.fixed {
position: fixed;
top: 0;
}
这里是我的网页,所以你可以看看究竟是我的问题: http://testportal.jon.cz/projekt-konfigurator/konfig.html
对不起,我的英语,并感谢您的答案: )
我曾经使用上Cart Pagecss
财产transform
做到了。您只需计算可使用jquery动态调整的偏移量即可。
jQuery(window).load(function() {
offset = jQuery('fieldset').offset().top; // offset from top of the left content
fieldset = jQuery('fieldset').outerHeight(); // outer height of the left content
collaterals = jQuery('.cart-collaterals').outerHeight(); // outer height of the movable right content
maxTop = fieldset > collaterals ? (fieldset - collaterals) + offset : offset;
jQuery(window).scroll(function() {
st = jQuery(window).scrollTop();
if (st > offset && st < maxTop) {
jQuery('.cart-collaterals').css('transform', 'translate(0px, ' + (st - offset) + 'px)');
} else if (st < offset) {
jQuery('.cart-collaterals').css('transform', 'translate(0px, 0px)');
} else if (st > maxTop) {
jQuery('.cart-collaterals').css('transform', 'translate(0px, ' + (maxTop - offset) + 'px)');
}
});
});
UPDATE
$(document).ready(function(){
var top = $('#pravyKonfig').offset().top - parseFloat($('#pravyKonfig').css('marginTop').replace(/auto/, 0));
var max = $('#odber').offset().top - $('#pravyKonfig').outerHeight();
$(window).scroll(function(evt){
var y = $(this).scrollTop();
$('#pravyKonfig').removeClass('fixed');
if(y > top && y < max){
$('#pravyKonfig').css('transform', 'translate(0px, ' + (y - top) + 'px)');
}else if(y < top){
$('#pravyKonfig').css('transform', 'translate(0px, 0px)');
}else if(y > max){
$('#pravyKonfig').css('transform', 'translate(0px, ' + (max - top) + 'px)');
}
});
});
我绝对没有想法,如何适应我的代码 – 2014-10-28 14:49:27
@AdamVýborný:我已经在** update **下面添加了新代码。希望这会帮助你。 – 2014-10-28 15:45:08
它不是那么光滑,就像固定的位置,但它的作品,就像一个魅力!非常感谢您的帮助! – 2014-10-29 11:01:26
您需要将位置从固定值更改为新值或重新计算底部值。
如果您使用的是jQuery。这是一个例子,不是最好的例子,而是来自我刚刚得到的一个项目。所以不是我的代码,但工作。你仍然必须适应你的目的。但是你可以看到,如果滚动条的位置超过某个值,div的位置就会改变。
var menuPosYloc = parseInt($("#Header").css("top").substring(0, $("#Header").css("top").indexOf("px")))
jQuery(window).scroll(function(e){
if ($(document).scrollTop() > menuPosYloc) {
$("#Header").css({"position" : "fixed", "top" : "20px" });
}
else {
$("#Header").css({"position" : "absolute", "top" : "20px; right:0px" });
}
});
您可能需要看到此链接为scrollBottom()函数
它根本不移动div。我做错了什么... – 2014-10-28 14:50:20
你可以发布一些代码?不知道如何修复一些东西,却没有看到它是如何构建的 – Adjit 2014-10-28 14:09:58
没有代码,没有收获... – Shaeldon 2014-10-28 14:10:06
整个代码我用它是在第一个链接 – 2014-10-28 14:12:37