javascript - Make a div scroll when i reach a certain point

Question

I want to make a div (button) scroll when I reach a certain scrolling point.Also i want to add classes to the other elements on the page.Somehow it isnt working.Here is the code Im using for the scroll,but I dont quite understand it.Please help me

$(window).load(function () {

    var nav = get_nav();

    if (!(nav.is_msie && nav.ver <= 6)) {
        var tmp1 = $('#tag_container').css('position');
        var cur_w_offset = start_offset = $('#butoni').offset().top;
        var bp = $('#right_content');
        var pt = $('#butoni');
        cur_w_offset = $(window).scrollTop();
        if (cur_w_offset >= start_offset) {
            bp.addClass('flyingbuy');
        } else {
            pt.css('top', 'auto');
        }
        if (window.content_center != true || window.c != false) {
            window.buydeal_forpresent = false;
        }
        $(window).scroll(function () {
            var tmp = $('#tag_container').css('position');
            ur_w_offset = $(window).scrollTop();
            if (cur_w_offset >= start_offset) {
                bp.addClass('flyingbuy');
                $('#tag_container').css('height', 'auto');
                $('#tag_container_bialo').slideDown('slow');
            } else {
                bp.removeClass('flyingbuy');
                $('#tag_container').css(({
                    position: "fixed",
                    height: "101px"
                }));
                $('#tag_container_bialo').slideUp('slow');
            }
            if (!window.buydeal_forpresent) {
                var nvp_panel = $('#right_content');
                var nvp_pricetag = $('#butoni');
                var bialo_height = $('#tag_container_bialo').height() + 20;
                var offset_top = nvp_pricetag.offset().top - nvp_panel.offset().top + 16;
                if (tmp == 'fixed') {
                    $('#gift').css('position', 'fixed');
                    var left = $('#butoni').offset().left + 223 - 18;
                    $('#gift').css('top', 16 + bialo_height + 'px');
                    $('#gift').css('left', left + 'px');
                } else {
                    $('#gift').css('position', 'absolute');
                    $('#gift').css('top', offset_top);
                    $('#gift').css('left', '205px');
                    $('#gift').animate({
                        top: offset_top + bialo_height
                    }, 400);
                }
            }
        });
    }
});

---

I have a problem now.I've been working here : JsFiddle

I don't want the text div to scroll that way.When the pages reaches at the button's level ,I want the txt to show,sliding down and moving along with the button.But,the text needs to be BEFORE the button.I don't know why it grows when sliding down.The sliding up part is ok.

---

Ok,i found out the growing part.I didnt specify the height. I really dont know how can I make the txt appear before the button and slide together.Like this:

TEXT BUTTON

Answer 1

I'm not 100% clear on what you're trying to achieve, and there seems to be a lot of code in your post that doesn't directly relate to your question. Here's a much simpler piece of code that seems to do what you want (if I'm interpreting your goal correctly):

JSFiddle Example

$(function(){
    var btn = $('.button');
    var btnPosTop = btn.offset().top;
    var win = $(window);
    win.scroll(function(e){
        var scrollTop = win.scrollTop();
        if(scrollTop >= btnPosTop){
            //we've reached the button
            btn.css({position:'fixed',top:0,marginTop:0});
        }else if(btn.css('position') === 'fixed'){
            //if we scroll back up past the button's original position, and the button had previously been changed to its fixed position, we change it back
            btn.css({position:'',top:'',marginTop:'100px'});
        }
    });
});

When the page loads, we get the original position, relative to the document, of the button's top edge. We then bind the window's scroll event to code that checks how far down the user has scrolled (win.scrollTop()). It compares that value to the button's original position. If it's found to be greater than or equal to the button's original position, that means the button should start scrolling with us by changing its CSS position to fixed. The else if part returns the button to its original position when the user scrolls back up.