#1
  1. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115

    ScrollTop confusion


    Hi guys,

    I was playing around with the function scrollTop() but it is not doing what I expected. I prety much want to retrieve the position of the element from the top of the viewport.

    javascript Code:
    $(document).ready(function(){
     
        $(window).scroll(function(){
     
                var Item2 = $("#item2").scrollTop();
                console.log(Item2);
     
        });    
    });


    #item2 is at around 2002px I expected the value to decrease but it doesn't can anyone spot what I am doing wrong? Been playing with offset() and position() but if I am correct those values will not change on static content when scrolling.

    Console keeps outputting 0
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,188
    Rep Power
    184
    You need to use the jQuery .position() API:
    Code:
        $(document).ready(function(){
            $(window).scroll(function(){
                   
                    var Item2 = $("#item2").position().top;
                    console.log(Item2);
               
            });   
        });
  4. #3
  5. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    Hi webLoone,

    Thanks for your reply.
    Eithe rI am stupid or am doing something wrong. If I use your exact code the position value stays the same.
    This pretty much is the mark-up i use.
    Code:
    <body>
    <div class="scrollcontainer">
                <div id="feedback"></div>
                <div class="scroll-item" id="item1">
                    <h2>Item 1</h2>
                    
                </div>
                <div class="scroll-item" id="item2">
                    <h2>item 2</h2>
                    
                </div>
            </div>
    </body>
    p.s. I gave the .scroll-item a height of 2000px
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,188
    Rep Power
    184
    Well, it would stay the same; if your element is not moving, within your page; which means it is "static". The only way it would change, is if you use JavaScript to move the element, as you scroll up/down your page.
  8. #5
  9. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    Thanks for responding again so swiftly!
    Originally Posted by web_loone08
    Well, it would stay the same; if your element is not moving, within your page; which means it is "static". The only way it would change, is if you use JavaScript to move the element, as you scroll up/down your page.
    exactly! that was what i tried to say on my first post.
    Originally Posted by aeternus
    Been playing with offset() and position() but if I am correct those values will not change on static content when scrolling.
    What I pretty much am looking for is a way to detect the position(distance) of the targeted element from the top of the window.

    Now I Think I found a way, by doing this:
    javascript Code:
     
    // to calculate the distance
    var distance = $(window).scrollTop() - $("#Item2).offset();
     
    // to scroll to the item
    $(window).scrollTop($("#Item2).offset());


    But I am not sure if that is a very elegant way. any improvements are welcome
    Last edited by aeternus; March 5th, 2013 at 08:53 PM.
  10. #6
  11. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,188
    Rep Power
    184
    Are you trying to do something like this?
    Code:
    <style>
    body {
    height:5000px;
    }
    .scroll-item {
    height:2000px;
    margin-top:2000px;
    }
    .scroll-item:nth-child(2) {
    margin-top:0px;
    }
    #item2 {
    height:100%;
    width:98%;
    }
    </style>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script>
    
    var fromTop = 2000;
    
        $(document).ready(function(){
            $(window).scroll(function(){
                   
    		var sTop = $(window).scrollTop();
    		var Item2 = $("#item2").position().top;
    
    if(sTop >= fromTop) {
    $("#item2").css("position","fixed");
    $("#item2").css("margin-top","-"+Item2);
    }
    else {
    $("#item2").css("position","relative");
    $("#item2").css("margin-top","2000");
    }
               
            });   
        });
    
    </script>
    
    <div class="scrollcontainer">
                <div id="feedback"></div>
                <div class="scroll-item" id="item1">
                    <h2>Item 1</h2>
                    
                </div>
                <div class="scroll-item" id="item2">
                    <h2>Item 2</h2>
                    
                </div>
    </div>
    Because, if your not; I am not quit sure what your wanting to do.
  12. #7
  13. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    Hi Web_loone,

    I was more or less trying to find out what scrollTop does. In the end I want to make a one page portfolio. Now I know there are some plugins for it, but in order to get a better understandingof jquery I thought I run through all functions that might help me out.

    I am afraid what you just gave me as last example is not really what I was looking for. I fail to see why one would change the position from relative to fixed in a scroll event (maybe for a menu?). Anyway thaks for your help. In my search I came across a nice github project worth sharing. since .scroll() fires like mice on crack in firefox. It limits the amount of function calls.
    https://github.com/cowboy/jquery-throttle-debounce

    Thanks for the help!!
  14. #8
  15. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,188
    Rep Power
    184
    If your wanting to make, like a portfolio similar to a site map, with anchors; only using jQuery, instead of html anchors... you could do something like this:
    Code:
    <style>
    .scroll-item {
    height:2000px;
    }
    .return, h2 {
    display:inline;
    }
    </style>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script>
    
        $(document).ready(function(){
    
            $("a[rel='links']").click(function(){
    
    	var containerHeight = $(".scroll-item").css("height").split("px")[0] - $("body").css("margin").split("px")[0];
    
    	var scrollFromTop = containerHeight;
    
    	var getNum = parseInt(this.text.toString().split(" ")[3]);
    
    	if (getNum > 1) {
    		getNum = getNum - 1;
    	}
    
    		var Item2 = $("#item"+getNum).position().top + scrollFromTop;
    
    		$(window).scrollTop(Item2);
    		return false;
            });   
    
            $("a[rel='links']:nth-child(1)").click(function(){
    		$(window).scrollTop("0");
    		return false;
    	});
    
            $("a.return").click(function(){
    		$(window).scrollTop("0");
    		return false;
    	});
    
        });
    
    </script>
    
    <a rel="links" href="#">Go To Item 1</a> |
    <a rel="links" href="#">Go To Item 2</a> |
    <a rel="links" href="#">Go To Item 3</a> |
    <a rel="links" href="#">Go To Item 4</a> |
    <a rel="links" href="#">Go To Item 5</a>
    
    <br/>
    <br/>
    
    <div class="scrollcontainer">
                <div id="feedback"></div>
                <div class="scroll-item" id="item1">
                    <h2>Item 1</h2>
                    
                </div>
                <div class="scroll-item" id="item2">
                    <h2>Item 2</h2> - <a class="return" href="#">Top</a>
                    
                </div>
                <div class="scroll-item" id="item3">
                    <h2>Item 3</h2> - <a class="return" href="#">Top</a>
                    
                </div>
                <div class="scroll-item" id="item4">
                    <h2>Item 4</h2> - <a class="return" href="#">Top</a>
                    
                </div>
                <div class="scroll-item" id="item5">
                    <h2>Item 5</h2> - <a class="return" href="#">Top</a>
                    
                </div>
    </div>
    Last edited by web_loone08; March 5th, 2013 at 10:57 PM.
  16. #9
  17. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    Thanks for sharing!!!

IMN logo majestic logo threadwatch logo seochat tools logo