基于垂直滚动的切换类答案

【问题标题】：Toggle Class Based On Vertical Scroll基于垂直滚动的切换类
【发布时间】：2016-04-21 16:41:59
【问题描述】：

小提琴在下面：

我只是苦苦思索如何根据垂直 scoll 位置计算何时添加和删除类的最佳方法。

我希望在我的网站上添加一些侧面板（可能包含横幅等），它们会出现：

在页眉和页脚之间
& 在我的主容器的左右两侧

我的页眉和页脚的高度在整个站点中是恒定的，因此我可以根据 ScrollTop 位置添加一个类，但是我需要的是“侧面板”不要超出页脚。在我的示例中，一旦 Scroll Position + Window 高度大于 Document 高度，将删除固定类，但是我想要实现的是这些面板到达页脚的开始（顶部）并开始向上滚动用户向下滚动页脚时的页面。即固定位置将切换到绝对定位+底部：0？？

我现在遇到的问题是如何计算：

主面板的高度因站点而异
另外，横幅的高度也可能不同

$(function() {
var panels = $(".side-panels");
var pos = panels.offset().top;  

$(window).scroll(function() {
    var windowpos = $(window).scrollTop() ;

    if(windowpos + $(window).height() >= $(document).height()){
        panels.removeClass('fixed').addClass('absolute');
    }else if(windowpos >= pos){
        panels.addClass('fixed');
    }else{
        panels.removeClass('fixed');
    }
});
});

这种方法是实现这一目标的最佳方式还是有更好/更简单的解决方案？

任何帮助将不胜感激

干杯

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

如果您的两个侧面板的高度与我假设的高度相同，因为它看起来有点傻，否则您可以非常简单地执行以下操作，只需创建一个滚动功能和 2 个添加和删除类的实例根据您的 div 的位置。这是一个工作小提琴Fiddle

html

<div class="header">Header</div>
<div class="content-wrapper">
  <div class="side-panel left"></div>
    <div class="main-content"></div>
  <div class="side-panel right"></div>
</div>
<div class="footer">Footer</div>

Jquery

$(window).on( "scroll", function() {
  if ( $(window).scrollTop() >= $(".content-wrapper").offset().top ) {
    $( '.side-panel' ).addClass("fixed");
  }else{
    $( '.side-panel' ).removeClass("fixed");
  }
  if ( $(window).scrollTop() >= $(".footer").offset().top - $('.side-panel').height()) {
     $( '.side-panel' ).addClass("absolute-bottom");
  }else{
    $( '.side-panel' ).removeClass("absolute-bottom");
  }
});

还有 css

.content-wrapper{
  position: relative;
  height: 100%;
  width: 100%;
}
.main-content{
  width: 60%;
  height: 1000px;
  position: relative;
  margin: 0 auto;
  background: #8a8a8a;
}
.side-panel {
  position:absolute;
  background-color:#532b90;
  width:10%;
  height:125px;
  top: 0;
}
.side-panel.left{
  left: 10%;
}
.side-panel.right{
  right: 10%;
}
.fixed{
  position: fixed;
}
.absolute-bottom{
  position: absolute;
  bottom: 0;
  top:auto;
}

【讨论】：

【解决方案2】：

您可以通过从页脚offset 顶部减去其height 来计算页脚的开始，代码如下所示

$(".footer").offset().top - $(".footer").height()。

现在您可以检查滚动位置何时达到上述计算并删除 .fixed 类，就像您在代码中所做的那样。

Here 就是一个例子。

代码：

$(function() {
var panels = $(".side-panels");
var pos = panels.offset().top;  
var footerTop = $(".footer").offset().top;

    $(window).scroll(function() {
        var windowpos = $(window).scrollTop() ;

        if(windowpos >= (footerTop - $(".footer").height())){
            panels.removeClass('fixed');
        }else if(windowpos >= pos){
            panels.addClass('fixed');
        }else{
            panels.removeClass('fixed');
        }
    });
});

【讨论】：

谢谢安东尼奥。刚刚更新了我的小提琴：jsfiddle.net/Lgwpwb3g，但看起来这个类在页脚开始之前就被删除了
你觉得应该这样计算吗：Windowpos >= header height + page content height - panel（banner height）？？
看起来我的计算失败了，我只在第一个示例中尝试过，所以我认为它有效，我尝试一些东西看看它们是否有效。
不用担心。我认为我已经让它工作了（下面的小提琴），除了最后一个 IF 语句，我希望它只在到达页脚顶部时添加类（即它应该是绝对位置和底部 0 时）。您看到当前发生的问题了吗？：jsfiddle.net/y6hy5z35
我已经做了一些改变，看看这个codepen.io/Ayeetu/pen/JGrpOL?editors=011，如果这是你在用解决方案编辑上面的答案之后的效果。

【解决方案3】：

您的方法看起来不错，但我认为您可以使用.height() 更多。每次页面加载或每当您调用该函数时，都会再次计算高度，使其非常动态。

var headerHeight = $('.header').height();
var footerHeight = $('.footer').height();
var contentHeight = $('.page-contents').height();

【讨论】：