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

方法1

是否可以删除一个类并添加另一个类，具体取决于滚动的页面的百分比？

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

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

if (scroll >= 4780)

您可以改为计算％：

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

if (percent >= 90)

方法2

或导航到达锚点时？

这也是可能的：

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) )

方法4

您甚至可以计算导航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 )

删除页面底部的类

1 个答案:

方法1

方法2

方法3

方法4