js Make a smooth scroll

Question

I seriously have a question about the scroll event. I tried to solve it all night but I couldnt.

I am trying stick a navigation on the top. The stick effect will process when $(window).scrollTop() pass the point right before the navigation.

The problem is, there will have a "blink" effect (its like delay process) on IE and Chrome but not on Firefox.

While on my research I knew that Firefox has "smooth scroll" by default.

However, please check this example on Chrome or IE

http://www.backslash.gr/demos/jquery-sticky-navigation/

It is so smooth like on Firefox, and the code is just that simple......

The point is, I am doing the exactly same thing like this example but why I have the 'blink' effect??

Is the trick on CSS ??

Is there any way that I can create a smooth scrool like what on firefox by js??

Thank you very much for your help.

$(window).on('scroll', Sticky);

function Sticky(){
    $(this).scrollTop() > anchor.offset().top
    ? nav.css({ 'position': 'fixed', 
                      'z-index': z_index, 
                       top: y, 
                       left: x, })
    : nav.css({ 'position': 'static', });
};

Answer 1

I think you might be confusing two things here.

1. looking at the working code you have linked to. there is a blink in there if you scroll on chrome or IE or firefox using your mouse scroller.
2. The blink is because you are changing position suddenly. Try to change the js so it does animate the position rather than suddenly changing its value.

As others have said linking to a working code and expecting an answer by showing a trick might not help all of us. Try to add animate on position change line of js and see if that helps.

There is no trick here. Its all in code so read the source and enjoy.