jquery - 删除页面底部的类

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');
    }
});

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

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

任何人都可以指出解决方案的方向吗？是否可以根据滚动页面的百分比删除一个类并添加另一个类？或者当导航到达 anchor 时？

Answer 1

方法一

Is it possible to remove a class and add another depending on the % of the page that's been scrolled through?

是的，而不是使用手动值来检查你的滚动:

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

if (scroll >= 4780)

您可以改为计算百分比:

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

if (percent >= 90)

方法二

or when the nav reaches an anchor?

这也是可能的:

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

if (scroll >= anchorPoint)

方法三

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

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 )