ScrollTo() method not working

Question

I am trying to use scrollTo() for making a div become fixed after it touches the top on scrolling. here is the full html with script I added:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
        <style>
            .topnav{
                width:100%; 
                background-color:#444; 
                color:#eee; 
                padding:10px; 
                position:relative;
            }
        </style>
        <script>
            $(window).scroll(function(){

                if($('body').scrollTo('.topnav', {offsetTop : '0'})){

                    $(this).css('position','fixed');
                    $(this).css('top','0');

                } else {

                    $(this).css('position','relative');
                }
            });
        </script>
    <head>
    <body>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>sdsf
        <br/><br/><br/><br/><br/><br/><br/><br/><br/>

        <div class="topnav">topnav</div>

        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>dfgv<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

    </body>
</html>

but it is not working at all. my logic was to say thjat if the div scrolls to top at 0 position, its position should change from relative to fixed, so that it fixes at the top after that. please tell what i did wrong.

http://stackoverflow.com/questions/1144805/how-do-i-scroll-to-the-top-of-the-page-with-jquery it should be help you — Divya Bhaloidiya, Aug 16 '13 at 06:46
There's no `scrollTo()` in jQuery API. Do you mean `scrollTop()`? — Mchl, Aug 16 '13 at 06:48
I don't see you're using plugin. Yet I would like to know, whether you're using any plugin (scrollTo)? — Praveen, Aug 16 '13 at 07:21

score 0 · Answer 1 · answered Aug 16 '13 at 07:25

0

After a little investigation, it is clear that you're missing to add scrollTo() plugin.

<script type='text/javascript' src='http://flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js' />

Add this to your code.

Check this in JSFiddle

answered Aug 16 '13 at 07:25

Praveen

55,303
33
133
164

Ankit · Answer 2 · 2013-08-16T08:14:07.553

I think you are confused between scrollTop() and scrollTo().
scrollTop() : method sets or returns the vertical scrollbar position for the selected elements.
scrollTo() : method scrolls the content to the specified coordinates.

See it here working, http://jsfiddle.net/cryostat/UhmNb/.

To make a div fixed when it touches the top, use this:

var fixed = false;

$(document).scroll(function() {
    if( $(this).scrollTop() >= 100 ) {
        if( !fixed ) {
            fixed = true;
            $('#nav').css({position:'fixed',top:0});
        }
    } else {
        if( fixed ) {
            fixed = false;
            $('#nav').css({position:'static'});
        }
    }
});

For a good example see this.

ScrollTo() method not working

2 Answers2