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;

请确保您将它们放在课程中的最后或删除重复属性。

您最初可以看到它的宽度为 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"
      });

    }
  });
})();

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

4 个答案: