在确定位置开始固定位置

Start fixed position in determinated position

本文关键字：位置 定位 开始      更新时间：2023-09-26

我有以下Javascript代码:

var  menuPosition = $('.scroll-nav').offset().top;
var  menuPos = 110;
if (menuPosition = menuPos) {
  $('.scroll-nav').addClass('stick-menu');
  $('.fake-nav').removeClass('stick-menu');
}

我的想法是当menuPostion的位置在110px粘.scroll-nav…但是当我加载页面时，代码会自动执行。

任何想法?

编辑

解决我的问题:

var distance = $('.scroll-nav').offset().top + 200, //+200 BECAUSE JQUERY OFFSET DONT GET MARGINS AND PADDINGS (+200 is an estimative of my total)
$window = $(window);
$window.scroll(function() {
    if ( $window.scrollTop() >= distance ) {
        $('.scroll-nav').addClass('is-sticky');
        $('.fake-nav').removeClass('is-sticky');
    }
    if ( $window.scrollTop() <= distance ) {
        $('.scroll-nav').removeClass('is-sticky');
        $('.fake-nav').addClass('is-sticky');
    }
});

将其封装到一个函数中，并在滚动时添加事件侦听器，当滚动时触发事件。

如果menuPos正好是110，那么您想添加一个类吗?你可以使用:

$(document).ready(callback)

而不是回调，你可以写匿名函数，将在页面加载时执行。你可以在这个项目上附加一个功能。

你可以编写和一个自定义eventListener来捕捉一个项目的位置变化:

jQuery.fn.onPositionChanged = function (trigger, millis) {
    if (millis == null) millis = 100;
    var o = $(this[0]); // our jquery object
    if (o.length < 1) return o;
    var lastPos = null;
    var lastOff = null;
    setInterval(function () {
        if (o == null || o.length < 1) return o; // abort if element is non existend eny more
        if (lastPos == null) lastPos = o.position();
        if (lastOff == null) lastOff = o.offset();
        var newPos = o.position();
        var newOff = o.offset();
        if (lastPos.top != newPos.top || lastPos.left != newPos.left) {
            $(this).trigger('onPositionChanged', { lastPos: lastPos, newPos: newPos });
            if (typeof (trigger) == "function") trigger(lastPos, newPos);
            lastPos = o.position();
        }
        if (lastOff.top != newOff.top || lastOff.left != newOff.left) {
            $(this).trigger('onOffsetChanged', { lastOff: lastOff, newOff: newOff});
            if (typeof (trigger) == "function") trigger(lastOff, newOff);
            lastOff= o.offset();
        }
    }, millis);
    return o;
};

你可以像这样触发这个事件:

$(document).ready(function() {
    $('.scroll-nav').onPositionChanged(someFunctionForExample());
}

* if语句中的条件应该使用'=='

注。我希望我没有理解错你的问题。如果我没有。分享更多的想法，这样我们可以帮助

相关文章：