我怎么能添加一类“底部”到“＃sidebar”一旦它到达其父容器的底部？ [英] How could I add a class of "bottom" to "#sidebar" once it reaches the bottom of its parent container?

问题描述

我正在使用下面的代码，一旦 #sidebar 将一个固定的类添加到某个站点顶部的高度取决于它所在的页面（即主页，单页，页面）。

I'm using the code below which adds a class of fixed to #sidebar once it reaches a certain height from the top of the site depending on what page it's on (i.e. home, single, page).

以类似的方式，我想添加一个类底部到 #sidebar 一旦 #sidebar 到达底部它的容器（ #content ）。如果用户向上滚动，则应删除 bottom 的类，并且应该添加 fixed 的类。

In a similar fashion, I would like to add a class of bottom to #sidebar once #sidebar reaches the bottom of its container (#content). If the user scrolls back up, the class of bottom should be removed and the class of fixed should be added back.

目标是尝试使固定侧边栏在其容器中的其余内容一旦到达底部时向上移动。

The goal is to try to get the fixed sidebar to move up with the rest of the content in its container once it reaches the bottom of it.

JavaScript

JavaScript

var threshold = 236;
if (jQuery(document.body).hasClass("home")) {
  threshold = 654;
} else if (jQuery(document.body).hasClass("single") || jQuery(document.body).hasClass("page")) {
  threshold = 20;
}

var scrolled = false;
jQuery(window).scroll(function () {  
  if (jQuery(window).scrollTop() >= threshold && !scrolled){
    jQuery('#sidebar').addClass('fixed');
    scrolled = true;
  } else if (jQuery(window).scrollTop() < threshold && scrolled) { 
    jQuery('#sidebar').removeClass('fixed');
    scrolled = false;
  }
});

HTML

<div id="container">

  <div id="content">

    <div id="sidebar"></div>

    <div id="masonry"></div>

  </div>

</div>

推荐答案

我相信这就是你要做的事情？

I believe this is what you are trying to do?

http://jsfiddle.net/M5sMx/33 /

$(window).on("scroll", function() { // When you scroll the window, do this function
 updatePosition();
});

var tester = null;
function updatePosition() {

    var sidebar = $("#sidebar"); // Set #sidebar to a variable called "sidebar"
    if (tester == undefined) {
        // Create a tester div to track where the actual div would be. 
        // Then we test against the tester div instead of the actual div.
        tester = sidebar.clone(true).removeAttr("id").css({"opacity" : "0" }).insertAfter(sidebar);
    }

    // If the tester is below the div, make sure the class "bottom" is set.
    if (testPosition(tester)) {
        sidebar.addClass("bottom");
        console.log("Add class");
    }
    else {
        sidebar.removeClass("bottom");
        console.log("remove class");
    }
}

function testPosition(sidebar) {
    console.log(sidebar.offset().top + " + " + sidebar.outerHeight() +" >= " + sidebar.parent().offset().top + " + " + sidebar.parent().outerHeight());
    if (sidebar.offset().top + sidebar.outerHeight() >= sidebar.parent().offset().top + sidebar.parent().outerHeight()) return true;
    return false;
}

HTML

<div class="body">
    <div class="leftBar">
        La la links
        <div class="floater" id="floater">
            Pooper scooper!
        </div>
    </div>
De body
</div>

有关正在发生的事情的直观说明，请参阅 http://jsfiddle.net/M5sMx/38/ 当你向下滚动时，你会看到测试者对象在做什么。

For a visual explanation of what is going on, see http://jsfiddle.net/M5sMx/38/ as you scroll down, you will see what the "tester" object is doing.

这篇关于我怎么能添加一类“底部”到“＃sidebar”一旦它到达其父容器的底部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！