Модуль Скользящий модуль при скроллинге страницы

scs

scs

Мастер
Регистрация
18 Дек 2009
Сообщения
267
Реакции
30
Собственно, ищу модуль/плагин остающийся на странице при скроллинге вниз/вверх для J1.5 и 2.5 .
В модуле необходимо размещение произвольного кода.
2 часа поисков и изучения JED поставили в ступор. Может кто встречал где?
 
Собственно, ищу модуль/плагин остающийся на странице при скроллинге вниз/вверх для J1.5 и 2.5 .
В модуле необходимо размещение произвольного кода.
Нажмите для раскрытия...
Может не совсем то что нужно, но на безрыбье... Для просмотра ссылки Войди или Зарегистрируйся
плагин позволяет скролить менюшки т.е. модули меню, вместе со скролом страницы. Соответственно боковое меню всегда перед глазами. А произвольный код можно создать непосредственно в разделе модулей "произвольный HTML код" и присвоить ему размещение напри. left.
з.ы. на форуме есть зануленная версия под j15
 
Их модуль обсчитывает "margin-top", причем в цикле - отсюда жуткая инертность модуля. Все-таки проще будет прямо в шаблоне прописать вывод модуля "произвольный HTML код" со стилем "position:fixed;top:20px;" (например)
Upd. Набросал рабочий код:
Вот это вставляем в шаблон, где к position-1 привязан наш модуль "произвольный HTML код" :
Код: 
<?php if($this->countModules('position-1')) : ?>
<style type="text/css">
#float_block {
  position: fixed;
  z-index: 1000;
  margin-left: -65px; /* смещение модуля влево от края контента */
}
</style>
 
<div id="float_block"><jdoc:include type="modules" name="position-1" /></div>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/float_block.js"></script>
<script type="text/javascript">float_block(150,20)</script>
<?php endif; ?>
Содержимое файла float_block.js, который надо бросить в папку js шаблона:
Код: 
function float_block(m1,m2){
    if(!m1)m1=150;
    if(!m2)m2=20;
    window.onload=function(){
        var p=document.getElementById('float_block');
        function m(){
            var top=Math.max(document.body.scrollTop,document.documentElement.scrollTop);
            if(top+m2<m1){
                p.style.top=m1-top+'px';
            }else{
                p.style.top=m2+'px';
            }
        }
        m();
        window.onscroll=m;
    }
};
Здесь - m1 минимальный отступ от верха страницы, с которого начнется "прилипание" блока, а m2 - отступ от верхнего края уже "прилипшего" блока.
 
Вообщем, дошли руки проделать "ход конем" после внесения изменений в навигацию. Что сделано.
Позиция прежняя
Код: 
<position>slidefixed</position>
В index.php такая конструкция
Код: 
<div id="slidefixed">
<jdoc:include type="modules" name="slidefixed" />
</div>
В CSS заданы стили
Код: 
#slidefixed {position:fixed;top:900px;right:417px;width:230px;height:400px;z-index:1000;}


Блок в нужном месте, с эти все ок. Но он находится не в первом экране, и при скроллинге скользит, но не поднимается в видимую область оставаясь внизу
Как сделать что бы он "поднимался" при скроллинге и прилипал к видимой верхней или центральной части экрана??
 
Смотрите, если вы воспользовались кодом, который я предложил, то в скрипте укажите "float_block(900,0)", а в файле float_block.js исправьте "if(!m2)m2=20;" на "if(!m2)m2=0;"
ну и проверьте, чтобы в этом же файле вместо "var p=document.getElementById('float_block');" было "var p=document.getElementById('slidefixed');"
 
Тогда слайдинга и не будет) position:fixed - фиксирует элемент в одном месте экрана - не важно в границах первого экрана или за его пределами. Динамика достигается как раз за счет использования скрипта, который, отрабатывая скроллинг страницы, динамически перемещает нужный вам элемент, изменяя ему свойство top.
Если все-равно хотите использовать только средства css, тогда нужно изначально разместить элемент в видимой части экрана, причем желательно учесть минимально возможные разрешения экрана по вертикали - для компьютеров это 600px, для смартфонов/телефонов по-моему 240px.
 
dima2k написал(а):
Вот это вставляем в шаблон, где к position-1 привязан наш модуль "произвольный HTML код" :
Код: 
<?php if($this->countModules('position-1')) : ?>
<style type="text/css">
#float_block {
  position: fixed;
  z-index: 1000;
  margin-left: -65px; /* смещение модуля влево от края контента */
}
</style>
 
<div id="float_block"><jdoc:include type="modules" name="position-1" /></div>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/float_block.js"></script>
<script type="text/javascript">float_block(150,20)</script>
<?php endif; ?>
Нажмите для раскрытия...

Вставляем в index.php шаблона не важно в какое место?
 
В index.php такая конструкция
Код: 
<div id="slidefixed">
<jdoc:include type="modules" name="slidefixed" />
</div>
Нажмите для раскрытия...

сюда же и вставляйте, т.е. т.к. стиль для #slidefixed вы уже определили, то просто под своим кодом добавьте подключение скриптов:
Код: 
<div id="slidefixed">
<jdoc:include type="modules" name="slidefixed" />
</div>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/float_block.js"></script>
<script type="text/javascript">float_block(900,0)</script>

и содержимое float_block.js в вашем случае будет таким:
Код: 
function float_block(m1,m2){
    if(!m1)m1=150;
    if(!m2)m2=0;
    window.onload=function(){
        var p=document.getElementById('slidefixed');
        function m(){
            var top=Math.max(document.body.scrollTop,document.documentElement.scrollTop);
            if(top+m2<m1){
                p.style.top=m1-top+'px';
            }else{
                p.style.top=m2+'px';
            }
        }
        m();
        window.onscroll=m;
    }
};

P.S. Можете переименовать везде float_block в slidefixed для стилизации =)
 
dima2k, Все отлично, только теперь в зависимости от ширина экрана, разрешения монитора, блок "плавает" в разной части экрана по горизонатли, надо бы его зафисксировать в позиции right жестко. По вертикали находится в нужном месте.
стили в template.css
Код: 
#slidefixed {position:fixed;top:900px;right:417px;width:230px;height:400px;z-index:1000;}
В index.php следующее
Код: 
<div id="slidefixed">
<jdoc:include type="modules" name="slidefixed" />
</div>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/slidefixed.js"></script>
<script type="text/javascript">slidefixed(900,0)</script>
в slidefixed.js следущее
Код: 
function slidefixed(m1,m2){
    if(!m1)m1=150;
    if(!m2)m2=0;
    window.onload=function(){
        var p=document.getElementById('slidefixed');
        function m(){
            var top=Math.max(document.body.scrollTop,document.documentElement.scrollTop);
            if(top+m2<m1){
                p.style.top=m1-top+'px';
            }else{
                p.style.top=m2+'px';
            }
        }
        m();
        window.onscroll=m;
    }
};
Вроде как медленно но уверено все идет к нужному результату, только чувствуется дефицит знаний...
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху