在页脚不起作用之前停止固定位置

Question

我有一个固定位置的元素：

.woocommerce #content div.product div.summary {
    position: fixed;
    right: 15%;
    padding: 20px;
    background-color: #ccc;
    width: 25%;
}

我想要做的是让元素在页脚之前停止，我尝试了以下方法：

$(document).scroll(function (){
  if($('.woocommerce #content div.product div.summary').offset().top + $('.woocommerce #content div.product div.summary').height() >= $('footer').offset().top - 10){
    $('.woocommerce #content div.product div.summary').css('position', 'absolute');
  }

  if($(document).scrollTop() + window.innerHeight < $('footer').offset().top){
    $('.woocommerce #content div.product div.summary').css('position', 'fixed');
  } 
});

但是我得到了一些奇怪的行为，它一直到顶部并且元素的宽度变得更小了，我不知道如何解决它。

这是我正在尝试的页面...

http://handyman-ondemand.com/product/electrical/

Answer 1

避免页脚超出 div.summary 的一种方法是在页脚顶部添加一个边距，即该 div 的高度。

#footer {
    margin-top: 500px;
}

Answer 2

编辑 = 目前对您的意图有第二个想法，您是否从链接中删除了有问题的代码？

删除所有 Javascript，对于您想要实现的目标完全没有必要 :)

它不能正常“停留”在那里的原因是因为您在首页上没有更多帖子，这些主题一旦完全活跃就可以正常工作。

但显然，您不希望主页上有更多内容是公平的。 将这三个属性添加到类中：

woocommerce #content div.product div.summary（您的主题 CSS 的第 #720 行）

    width: 100%;
    bottom: 0px;
    position: relative;

确保将它们last放在类中或删除双重属性。

你可以看到最初它的宽度是 width: 49.9%; 可能是打算并排放置第二个相同类型的盒子。大多数现代浏览器最终会自行生成正确的全宽，但显然并不理想，最好声明 100%。

相对位置和底部 0px 将负责将其保持在其父 div 内。

希望对你有用！

ps：始终赋予可扩展解决方案（%、vw、vh、..）超过固定大小（像素）的特权，稍后当您意识到并非所有浏览器都生来平等时，您会感谢我的 :)

Answer 3

如果我没听错的话，这对Intersecion Observer (IO) 来说是一份完美的工作。使用 IO，您可以对与其他元素或视口重叠的元素做出反应。您可以定义何时触发此观察者、何时开始/结束或什至在此之前。

要使用 IO，您首先必须设置要何时触发 IO 的选项。我不是 100% 明白你的问题，但如果你希望元素在页脚之前停止，你需要将你的根设置为你的页脚。

let options = {
  root: document.querySelector('footer'),
  rootMargin: '0px',
  threshold: 1.0
}

let observer = new IntersectionObserver(callback, options);

然后您指定要监视哪个元素与您的页脚相交：

let target = document.querySelector('.woocommerce #content div.product div.summary');
observer.observe(target);

最后一步是定义元素重叠时调用的函数：

let callback = (entries, observer) => { 
  entries.forEach(entry => {
    // Each entry describes an intersection change for one observed
    // target element
  });
};

您也可以使用此polyfill from w3c 来支持旧版浏览器

Answer 4

请检查您的计算。用元素的高度和 window.height 计算正确的范围。 您的“固定”定位元素应该是根级别。 （跨浏览器问题）

在此页面上运行代码。 TargetElementSelector 在本例中是页脚。你需要改变它。

(function() {
  var mainElement = "main_element_id";
  var targetElementSelector = "#footer";
  jQuery(targetElementSelector).height(500); // if the footer's height is low to work with

  var mainElementMaxTopPosition = jQuery(targetElementSelector).offset().top - jQuery(targetElementSelector).height();

  var html = '\
    <div id="' + mainElement + '" \
        style="position: fixed;width: 250px;height: 250px;left: 0;right: 0;margin: auto;top: 0;bottom: 0;\
    background: red;z-index: 99;border: 1px solid black;">\
  </div>';
  jQuery('body').prepend(html);

  jQuery(window).scroll(function() {
    var current = jQuery(window).scrollTop() + (jQuery(window).height() / 2);

    if (current >= mainElementMaxTopPosition) {

      var topPosition = (jQuery(targetElementSelector).offset().top - jQuery('#' + mainElement).height());

      jQuery('#' + mainElement).css({
        position: "absolute",
        bottom: "auto",
        top: topPosition + "px"
      });

    } else {

      jQuery('#' + mainElement).css({
        position: "fixed",
        bottom: "0",
        top: "0"
      });

    }
  });
})();