javascript - 基于垂直滚动切换类

Question

fiddle 在下面:

https://jsfiddle.net/y0mj6v2d/5/

我只是在努力思考根据垂直滚动位置计算何时添加和删除类的最佳方法。

我想在我的网站上添加一些侧面板(可能包含横幅等)，它们会出现:

• 在页眉和页脚之间
• & 在我的主容器的左边和右边

我的页眉 + 页脚的高度在整个站点中是恒定的，因此我可以根据 ScrollTop 位置添加一个类，但是我需要的是“侧面板”不要超出页脚。在我的示例中，一旦滚动位置 + 窗口高度大于文档高度，固定类将被删除，但是我想要实现的是这些面板到达页脚的开始(顶部)并开始向上滚动当用户向下滚动页脚时的页面。即固定位置将切换为绝对定位+底部: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');
    }
});
});

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

任何帮助将不胜感激

干杯

Answer 1

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