Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) jQuery Как решить проблему скролла с javascript?

Как решить проблему скролла с javascript?


     24.08.2015    jQuery    651

вопрос
Есть такой код:
(function($){
    $.fn.report = function(options) {
        var options = $.extend({css_hover: 'hover', css_even: 'even', css_odd: 'odd'}, options);
        var $this = this;
        if($this.length == 0) return;
        var doc = document.documentElement;
        var body = document.body;
        var table = [];
        onInit();
        //
        $(window).bind('scroll', function(){  
            onScroll();
        });
        $(window).bind('resize', function(){  
            onResize();
        });
        
        function onInit(){
            $this.each(function(i, _table){
                var $table = $(_table);
                $table.children('tbody').find('tr:even:not(.group)').addClass(options.css_even).hover(
                    function(){
                        //console.info('hover', $(this));
                        $(this).addClass(options.css_hover);
                    },
                    function(){
                        //console.info('unhover');
                        $(this).removeClass(options.css_hover);
                    }
                );
                $table.children('tbody').find('tr:odd:not(.group)').addClass(options.css_odd).hover(
                    function(){
                        //console.info('hover', $(this));
                        $(this).addClass(options.css_hover);
                    },
                    function(){
                        //console.info('unhover');
                        $(this).removeClass(options.css_hover);
                    }
                );
                //
                var $thead = $table.children('thead');
                table[i]={
                    table  : $table,
                    thead  : $thead,
                    thead_h: $thead.height(),
                    fixed: null
                };
            });
        }
        
        function onResizeItem(i){
            if(table[i].fixed){
                var a_td = table[i].thead.find('td,th');
                var a_th = table[i].fixed.find('td,th');
                for(var i = 0, c = a_td.size(); i < c; i++)a_th.eq(i).width(a_td.eq(i).width());
            }
        }
        function onResize(){
            $this.each(function(i){
                if(table[i].fixed){
                    var _width = table[i].table.width();
                    if(table[i].fixed.width != _width){
                        table[i].fixed.width(_width);
                        onResizeItem(i);
                    }
                }
            });
        }
        function onScroll(){
            
            var scroll_top = (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc.clientTop || 0);
            
            
            $this.each(function(i,_table){
                var offset = table[i].table.offset();
                
                if(offset.top < scroll_top && offset.top+table[i].table.height()-table[i].thead_h > scroll_top){

                    if(!table[i].fixed)cloneHeader(i);
                    if(table[i].fixed){
                        table[i].fixed.css({left: 0, top: scroll_top});
                        table[i].fixed.show();
                    }
                }else{
                    if(table[i].fixed) table[i].fixed.hide();
                }
            });
        }
        
        function cloneHeader(i){
            var header = $(document.createElement('table')).addClass(table[i].table.attr('class')).addClass('noprint').css({position:'absolute', 'z-index' : 1000, width:table[i].table.width()});
            var thead_clone = table[i].thead.clone().wrap(header).parent();
            $('.main-table').prepend(thead_clone);
            table[i].fixed = thead_clone;
            onResizeItem(i);
        }
    }
})(jQuery);


В нем есть:

var scroll_top = (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc.clientTop || 0);


Хоть я и знаю на относительном уровне js, но не могу понять этотого синтаксиса. Сейчас скрипт считает позицию до эллемента от топа, и при скролле добавляет значение в scroll_top. У меня почем-то не получается найти кусок кода, который нужно удалить для определения позиции эллемента. Помогите пожалуйста.

Ссылка на пример уже готовой таблицы с данным скриптом (плашка плаваетЮ но не правильно :( )

dev.webven.ru/Partarium/tm-catalog.html

Ответа пока нет


Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы