切換基於類的在垂直滾動

Question

小提琴如下：

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

只是奮力滿腦子都在最好的方法來計算何時添加+刪除基於垂直scoll位置的一類。

我期待添加一些側板（可能包含橫幅等）到我的網站，將出現：

頁眉和頁腳
• ＆向左和我的主要的權之間
• 容器

我的頁眉+頁腳的高度在整個網站都是不變的，所以我可以添加一個基於ScrollTop位置的類，但是我需要的是'Side Panels'不能超越頁腳的開始。在我的例子中，一旦滾動位置+窗口高度大於文檔高度，固定類就會被移除，但是我想要達到的是這些面板到達頁腳的開始（頂部）&開始向上滾動頁面作爲用戶向下滾動頁腳。即固定位置將切換到絕對定位+底部：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

的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; 
} 

Answer 2

你的方法似乎不錯，但我認爲你可以使用.height()更多。每次加載頁面或每次調用該函數時，高度將再次計算，使其非常動態。

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

Answer 3

您可以通過從頁腳中減去其heightoffset頂部計算頁腳開始的代碼應該是這樣的

$(".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'); 
     } 
    }); 
});