删除页面底部的类

Question

我有一个固定位置的导航，当用户向下滚动页面时它会淡入。当他们到达页面底部时，导航需要停在页脚上方。

作为一种解决方法，我定义了包含 div 的高度并使用了..

var floatnav = $(".floatingnavfix");
$(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll >= 4780) {
        floatnav.removeClass('floatingnavfix').addClass("floatingnavab");
    } 
    else {
        floatnav.removeClass("floatingnavab").addClass('floatingnavfix');
    }
});

将导航绝对定位在页脚上方。

以上工作正常，但要在各种页面上使用布局，我无法定义固定高度。

谁能指出解决方案的方向？是否可以根据滚动页面的百分比删除一个类并添加另一个类？或者当导航到达锚点时？

Answer 1

方法一

是否可以根据滚动页面的百分比删除一个类并添加另一个类？

是的，而不是使用手动值来检查您的滚动：

var scroll = $(window).scrollTop();

if (scroll >= 4780)

您可以改为计算 %：

var scroll = $(window).scrollTop();
var pageHeight = $(document).height();
var percent = scroll / pageHeight * 100;

if (percent >= 90)

方法二

或者当导航到达锚点时？

这也是可能的：

var scroll = $(window).scrollTop();
var anchorPoint = $("#element").offset().top;

if (scroll >= anchorPoint)

方法3

由于您将事件集中在页脚周围，因此您还可以计算用户是否已到达其屏幕中的页脚：

var scroll = $(window).scrollTop();
var footerPosition = $("#footer").offset().top;
var screenHeight = $(window).height();

if (scroll >= (footerPosition - screenHeight) )

方法四

您甚至可以计算出您的导航 div 是否触及页脚。有很多可能性。

var footerPosition = $("#footer").offset().top;
var navHeight = $("#nav").height();
var navPosition = $("#nav").offset().top;
var margin = 20; // I assume you want a little bit of spacing 
                 // inbetween the nav and the footer

if ( (navPosition + navHeight + margin) >= footerPosition )