Javascript 滚动返回firefox
我已经创建了一个粘性侧边栏功能,它在chrome和safari中可以完美工作,但在Firefox中却不能。据我所知,它没有在应该的时候正常返回 考虑一段有问题的代码:Javascript 滚动返回firefox,javascript,jquery,css,google-chrome,firefox,Javascript,Jquery,Css,Google Chrome,Firefox,我已经创建了一个粘性侧边栏功能,它在chrome和safari中可以完美工作,但在Firefox中却不能。据我所知,它没有在应该的时候正常返回 考虑一段有问题的代码: if (scrolling_down && bottom_offset <= bottom_padding) { $item.css({ position: 'absolute',
if (scrolling_down && bottom_offset <= bottom_padding) {
$item.css({
position: 'absolute',
top: 'auto',
bottom: bottom_padding
});
console.log(1);
return false;
console.log(2);
}
console.log(3);
编辑:代码笔示例:-但是这似乎可以正常工作,所以页面上有其他干扰。我不希望有人能解决这个问题,但可能会有一些建议。恐怕现在我无法链接到live页面。似乎Firefox没有正确计算。在底部填充计算中添加+20px似乎可以解决这个问题。如果没有一个同样显示HTML的plunkr或jsbin示例,很难判断。但是
位置有什么问题:已修复
?它必须在不碰到页面顶部/底部时粘住。否则,它应该是相对的顶部,和绝对定位的底部。
// Sticky Sidebars
stickyAsides: function() {
var $item = $('.js-sticky'),
$parent = $item.parent(),
last_scroll = 0,
scrolling_down = false;
function setStyles() {
$item.css({
width: $item.outerWidth()
});
}
function stick() {
var parent_rect = $parent.get(0).getBoundingClientRect(),
parent_top = parent_rect.top,
parent_bottom = parent_rect.bottom,
item_rect = $item.get(0).getBoundingClientRect(),
item_top = item_rect.top,
item_bottom = item_rect.bottom,
bottom_offset = parent_bottom - item_bottom,
bottom_padding = parseInt($parent.css('padding-bottom'));
scrolling_down = (last_scroll < w.scroll) ? true : false;
setStyles();
if (scrolling_down && bottom_offset <= bottom_padding) {
$item.css({
position: 'absolute',
top: 'auto',
bottom: bottom_padding
});
console.log(1);
return false;
console.log(2);
}
console.log(3);
if (item_top <= -10 || parent_top <= 0) {
$item.css({
position: 'fixed',
top: '0',
bottom: 'auto'
});
}
if (!scrolling_down && parent_top > 0) {
$item.css({
position: 'relative',
top: '0',
bottom: 'auto'
});
}
last_scroll = w.scroll;
}
$(window).on('scroll', function(){
w.scroll = $doc.scrollTop();
if (Modernizr.mq('(min-width: 1024px)') && Modernizr.flexbox) {
stick();
}
});
}, // End stickyAsides()