当我到达某个点时进行div滚动

时间:2011-09-19 13:02:49

标签: javascript jquery css

当我到达某个滚动点时,我想要一个div(按钮)滚动。我也想在页面上的其他元素中添加类。它们不工作。这是我用于滚动的代码,但我不太明白。请帮帮我

$(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);
                }
            }
        });
    }
});

我现在遇到问题。我一直在这里工作:JsFiddle

我不希望文本div以这种方式滚动。当页面到达按钮的级别时,我希望txt显示,向下滑动并与按钮一起移动。但是,文本需要在此之前按钮。我不知道为什么它在向下滑动时会增长。向上滑动部分是可以的。


好的,我发现了成长的部分。我没有指定高度。 我真的不知道如何让txt出现在按钮之前并一起滑动。就像这样:

TEXT BUTTON

2 个答案:

答案 0 :(得分:3)

我不是100%清楚你要实现的目标,而且你的帖子中似乎有很多代码与你的问题没有直接关系。这是一段更简单的代码,似乎可以做你想要的(如果我正确地解释你的目标):

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

当页面加载时,我们获得按钮顶部边缘相对于文档的原始位置。然后,我们将窗口的scroll事件绑定到代码,该代码检查用户滚动的距离(win.scrollTop())。它将该值与按钮的原始位置进行比较。如果发现它大于或等于按钮的原始位置,则表示该按钮应该通过将其CSS position更改为fixed来开始向我们滚动。当用户向上滚动时,else if部分将按钮返回到其原始位置。

答案 1 :(得分:0)

尝试使用此

$(window).scroll(function () {
    var top = $(window).scrollTop();
    if(top>879)
    {   $("div").addClass('yourclass');
    }
});

此处为879指定了滚动点