当我滚动到它时,如何将元素的id传递给url?

时间:2014-04-29 10:54:58

标签: javascript jquery html scroll frontend

我在页面上有一组元素,其中包含id。

客户希望能够在每次滚动时都有一个将id附加到url末尾的滚动。

所以标记:

HTML:

<section class="body-large scrolled" id="drop-in-membership">

</section>      

      <section class="body-large scrolled" id="hotdesk-membership">

</section>      

      <section class="body-large scrolled" id="resident-membership">

</section>      

      <section class="body-large scrolled" id="studios">

</section>

JS:

$(window).scroll(function() {

                var winTop = $(this).scrollTop();
                var $scrolledDivs = $('.scrolled');

                $.each($scrolledDivs, function(item) {
                    if( $(item).offset().top == winTop ) {

                    //console.log( this.attr('id') );
                    window.location.href + scrolledDivs.attr('id');
                }

                });
            });

似乎没有任何效果。

有人能指出我正确的方向吗?

1 个答案:

答案 0 :(得分:2)

我相信这是你要找的东西:

http://jsfiddle.net/bfd7w/

function CheckScroll(el) {
    var top_of_object = el.offset().top;
    var bottom_of_window = $('.window').height();
    if (bottom_of_window >= top_of_object) {
        $('#result').text('ID ("'+el.attr('id')+'") is now showing');
    }    
}

$('.window').scroll(function(){
    $('section').each(function() {
        CheckScroll($(this));        
    });
});

编辑:

对于窗口滚动: http://jsfiddle.net/bfd7w/3/

function CheckScroll(el) {
    var top_of_object = el.offset().top;
    var bottom_of_window = $(window).scrollTop() + $(window).height();
    if (bottom_of_window >= top_of_object) {
        $('#result').text('ID ("'+el.attr('id')+'") is now showing');
    }    
}

$(window).scroll(function(){
    $('section').each(function() {
        CheckScroll($(this));        
    });
});