js滚动平滑

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

Looking at the incomplete example code it's really hard to determine what's going on, so please either update your question with complete code, or better - upload a JSFiddle to serve us as an example and we can directly update it with necessary changes. So far (based on what I said before) it looks like you're getting a flickering effect due to typos in your example code :

? nav.css({ 'position': 'fixed', 
                  'z-index': z_index, 
                   top: y, 
                   left: x, })
: nav.css({ 'position': 'static', });

where you're not terminating the array of CSS properties and values that needs to be applied (you're ending it with a comma , ), and you've not enclosed some CSS properties in a single quote ' . Your code should be :

? nav.css({ 'position': 'fixed', 
                  'z-index': z_index, 
                   'top': y, 
                   'left': x })
: nav.css({ 'position': 'static' });

That's of course provided you've already set variables z_index , y and x beforehand.

EDIT & DISCLAIMER: I've created a new JSFiddle with the original demo code. The demo you referred to is copyrighted, so please attribute your gratitude to the original author and not me, if that helps you out. The code I've posted JSFiddle with is available as a free download, though. So I guess it's OK to reuse it for demo purposes as well. Change that code to comply with your requirements and update it to new version each step you update it. It will help you track where you're doing something wrong (if at all). ;)

Answer 2

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.