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

Maybe you should just use the one that you linked to, which already works? — leftclickben
– leftclickben, Commented Feb 2, 2013 at 15:33
I cannot implement the same thing...I rather want to know the trick.. — Micah
– Micah, Commented Feb 2, 2013 at 15:34
What exactly do you mean by "blink effect"? Maybe the issue is that you're moving the element out of static positioning into fixed positioning. By doing so, the space the element occupied is removed, so everything below it will move a bit to the top. — pimvdb
– pimvdb, Commented Feb 2, 2013 at 15:49

Farrukh Subhani · Accepted Answer · 2013-02-02 16:03:43Z

1

I think you might be confusing two things here.

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.
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.

answered Feb 2, 2013 at 16:03

Farrukh Subhani

2,0131 gold badge17 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Farrukh Subhani Over a year ago

stackoverflow.com/questions/938655/… Have a look at this. You dont have to animate the menu you can animate the page to take it back so menu goes on top. Like you do on move to top.

Farrukh Subhani Over a year ago

Can you have a look at posted jsfiddle and see in chrome if using scrollbars and using mouse scroll is different for you and on your actual code as well.

TildalWave · Accepted Answer · 2013-02-02 19:53:44Z

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). ;)

Collectives™ on Stack Overflow

js Make a smooth scroll

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related