航路点插件Jquery

waypoint Plugin Jquery

本文关键字:Jquery 插件 航路      更新时间:2023-09-26
$(function() {
    // Do our DOM lookups beforehand
    var nav_container = $(".nav-container");
    var nav = $("nav");
    nav_container.waypoint({
        handler: function(event, direction) {
            nav.toggleClass('sticky', direction=='down');
            if (direction == 'down') nav_container.css({ 'height':nav.outerHeight() });
            else nav_container.css({ 'height':'auto' });
        },
        offset: 15
    });
});

你好吗?-我使用imakewebthings.com/jquery-waypoints在页面上向下移动导航元素。我多么希望在页面的特定部分取消粘贴导航元素,然后在向上滚动时将其粘贴回原来的位置——向下滚动后可能为30pixel。

任何帮助都将不胜感激。

如果我理解您希望元素在超过某个阈值时保持不变,并在超过该阈值时返回到固定值?

如果是,请查看http://drewdahlman.github.io/Pinned/这正是你想要的。这是一个易于使用的插件。

$("#element").pinned({
    bounds: 30, // when to become sticky
    scrolling: 0, // position during scroll 
});

当它超过30像素时,它会回到原来的位置,当它达到30像素时就会粘住。确保将其默认位置设置为绝对位置。

祝你好运!