Заголовок скользящей таблицы jQuery - PullRequest
1 голос
/ 09 июня 2011

Мое приложение ASP.Net генерирует <asp:Table> из кода. Мне нужно, чтобы строка заголовка этой таблицы скользила по странице, когда пользователь прокручивает ее.

Я попробовал следующий подход с использованием JavaScript:

window.onscroll = function () {

    //grab the current scroll position
    var scrollY = document.body.scrollTop;
    if (scrollY == 0) {
        if (window.pageYOffset)
            scrollY = window.pageYOffset;
        else
            scrollY = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
    }

    //grab the position of the header row I want to slide
    var head = $("tr[name='headerrow']").offset();
    var headtop = head.top;
    var headleft = head.left;

    //if the user has scrolled past the top of the header row
    if (scrollY > headtop) {

        //code correctly reaches this point as alerts show
        //alert('got here');

        //position the header row to the same as the scroll position 
        $("tr[name='headerrow']").offset({ top: scrollY, left: headleft });
    }
}

Я не могу заставить ряд двигаться. Нет сообщений об ошибках в различных инструментах разработчика браузеров.

Любая помощь будет оценена.

EDIT : я пытался вызвать функцию offset() для дочерних элементов строки (то есть всех элементов <th>), например:

$("tr[name='headerrow']").children().offset({ top: scrollY, left: headleft });

Теперь это работает, но, конечно, все они сдвинуты влево, потому что я использую значение left самой строки заголовка ... Я буду обновлять это по мере своего прогресса, но пока любая помощь ценится как всегда.

Ответы [ 2 ]

0 голосов
/ 09 июня 2011

Решение:

Используйте метод children() в строке таблицы, чтобы изменить смещение каждого из элементов <th>. Значение left может быть опущено в методе offset(), т.е.

$("tr[name='headerrow']").children().offset({ top: scrollY });
0 голосов
/ 09 июня 2011

Вы не можете установить смещение для любого элемента.Вы должны использовать метод css и установить верхний и левый параметры.

...