[英]How do I stop a fixed element from going beyond the footer with jQuery
我在侧栏中固定了“ Get Started”元素,当它滚动到某个点以上时,但在较小的笔记本电脑屏幕(14“至18”)上,当用户向下滚动时,它最终进入页脚。
我要设置它,以便一旦它检测到粘性位于页脚的10像素之内,它就会停止。
链接到网站
http://previewyournewwebsite.info/otsl/compare-reverse-mortgage-loan-products
这是我使用的代码:
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('.sticky-anchor').offset().top;
if (window_top > div_top)
$('.sticky-element').addClass('sticky')
else
$('.sticky-element').removeClass('sticky');
}
$(function() {
if ($('.sticky-anchor').length != 0){
$(window).scroll(sticky_relocate);
sticky_relocate();
}
});
那这样的事呢
function sticky_relocate() {
var sticky_element = $('.sticky-element');
var window_top = $(window).scrollTop();
var div_top = $('.sticky-anchor').offset().top;
var div_height = sticky_element.height();
var footer_top = $('.footer').offset().top;
if (window_top > div_top) {
sticky_element.addClass('sticky')
} else {
sticky_element.removeClass('sticky');
}
if(div_top + div_height > footer_top - 10) {
sticky_element.css("top", footer_top - 10);
}
}
$(function() {
if ($('.sticky-anchor').length != 0){
$(window).scroll(sticky_relocate);
sticky_relocate();
}
});
获取div的高度,并检查其顶部位置+高度是否不超过页脚的顶部位置。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.