Geek asks and answers

Window.scroll freezes firefox function

I’m working on a page with a fixed menu that is selected after the user scrolls a certain distance from the top, and when they scroll down the page, a different class is assigned to the various links from the menu that changes color. All this works well in Chrome and Safari, but in Firefox page freezes at the top. I am wondering if any code is overflowing ... essentially freezes the window.

Here is my code.

$.localScroll({
    onBefore: function() {
        $('body').data('scroll-executing', true);

    },
    onAfter: function() {
        $('body').data('scroll-executing', false);
        $(window).trigger("scroll");
    }
});

$(window).scroll(function () {
    if ($(this).scrollTop() > 259) {
        $('.nav').addClass("f-nav");
    } else {
        $('.nav').removeClass("f-nav");
    }
});

$(window).scroll(function() { 
    if ($('body').data('scroll-executing')) {
        return;
    }
    // find the a with class 'active' and remove it
    $("a").removeClass('active');
    // get the amount the window has scrolled
    var scroll = $(window).scrollTop();
    // add the 'active' class to the correct #nav based on the scroll amount

    if (scroll > 2150) {
        $("#nav_3").removeClass('active');
        $("#nav_5").attr('class', 'active');
        setHash("contact");

    } else if (scroll > 1300) {
        $("#nav_2").removeClass('active');
        $("#nav_3").attr('class', 'active');
        setHash("portfolio");

    } else if (scroll > 400) {
        $("#nav_2").attr('class', 'active');
        setHash("about");

    } else if (scroll <= 380) { //when I remove this section, the problem goes away.
        $("#nav_1").attr('class', 'active');
        setHash("home");
    }

});

I forgot to add a definition to setHash. Here it is.

setHash = function(hash) {
    var scrollmem = $('body').scrollTop();
    window.location.hash = hash;
    $('html,body').scrollTop(scrollmem);
}

I also noticed that the processor reaches 100%, and I can’t understand why.

, else if (scroll <= 380). - . - , -, ... , firefox ?

... jquery , , .

.

+5
3

. @ undefined, , . :

, , jQuery . , , , jQuery.

var nav2 = $("#nav_2");
$(window).scroll(function() {
   ...
   nav2.removeClass('active');
   ...
});

, - , , $('.nav').addClass("f-nav");.

/ , . - :

var alreadyAdded = false;
var alreadyRemoved = false;
$(window).scroll(function () {
    if ($(this).scrollTop() > 259) {
      if(!alreadyAdded){
        $('.nav').addClass("f-nav");
        alreadyAdded = true;
        alreadyRemoved = false;
      }
    } else if(!alreadyRemoved) {
        $('.nav').removeClass("f-nav");
        alreadyAdded = false;
        alreadyRemoved = true;
    }
});

, , , , , . , . firefox , , IE.

+1

In addition to other problems, $('body').scrollTop()it will always return 0 in Firefox. When setHash()launched $('html,body').scrollTop(scrollmem);}, it will move to the top of the screen, which looks exactly like getting stuck at the top of the screen when the user first loads the page. $(window).scrollTop(), combined with throttling, will solve this problem.

0
source

More articles:


All Articles