Question

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

Answer 1

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

Answer 2

所以如果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语句中的条件应为'=='

P.S。我希望我能理解你的问题。如果我没有。分享一些关于此的想法，以便我们可以提供帮助

在确定的位置开始固定位置

2 个答案: