Question

小提琴在下面：

只是努力绕着最好的方法来计算何时根据垂直scoll位置添加+删除一个类。

我正在寻找添加一些侧面板（可能包含横幅等）到我的网站，这将出现：

页脚
＆安培;在左边＆amp;我的主要货柜右侧

我的标题+页脚的高度在整个网站中是不变的，所以我可以根据ScrollTop位置添加一个类，但是我需要的是“侧面板”不要超出开头的页脚。在我的例子中，一旦Scroll Position + Window高度大于Document高度，就会删除固定类，但是我想要实现的是这些面板到达Footer＆amp;的起点（顶部）。当用户向下滚动页脚时，开始向上滚动页面。即固定位置将切换到绝对定位+底部：0 ??

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

主要面板的高度因网站而异
Plus横幅的高度可能会有所不同

$(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

您的方法似乎很好，但我认为您可以使用.height()更多。每个页面加载或每当您调用该函数时，将再次计算高度，使其非常动态。

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

Answer 2

您可以通过从页脚height中减去offset来计算页脚的开头，代码看起来像这样

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

现在，您可以检查滚动位置何时达到上述calucation并删除.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');
        }
    });
});

Answer 3

如果你的两个侧面板都是相同的高度，我认为它们是因为它看起来有点傻，否则你只需要创建一个on滚动功能和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;
}

基于垂直滚动切换类

3 个答案: