VBsupport перешел с домена .ORG на родной .RU
Ура!
Пожалуйста, обновите свои закладки - VBsupport.ru
Блок РКН снят, форум доступен на всей территории России, включая новые терртории, без VPN
На форуме введена премодерация ВСЕХ новых пользователей
Почта с временных сервисов, типа mailinator.com, gawab.com и/или прочих, которые предоставляют временный почтовый ящик без регистрации и/или почтовый ящик для рассылки спама, отслеживается и блокируется, а так же заносится в спам-блок форума, аккаунты удаляются
Если вы хотите приобрести какой то скрипт/продукт/хак из каталогов перечисленных ниже: Каталог модулей/хаков
Ещё раз обращаем Ваше внимание: всё, что Вы скачиваете и устанавливаете на свой форум, Вы устанавливаете исключительно на свой страх и риск.
Сообщество vBSupport'а физически не в состоянии проверять все стили, хаки и нули, выкладываемые пользователями.
Помните: безопасность Вашего проекта - Ваша забота. Убедительная просьба: при обнаружении уязвимостей или сомнительных кодов обязательно отписывайтесь в теме хака/стиля
Спасибо за понимание
Давно искал скрипт, который зафиксирует нижний блок в правой колонке и потащит его за собой вниз при скроллинге. На саппорте есть скрипт плавающего окна быстрого ответ от kerk, но в данном случае он не подошел по той причине, что работал некорректно на страницах, где высота столбца больше высоты страницы.
Нашел такой вот вариант:
Code:
<script type="text/javascript">
function getTopOffset(e) {
var y = 0;
do { y += e.offsetTop; } while (e = e.offsetParent);
return y;
}
var block = document.getElementById('fixblock'); /* fixblock - значение атрибута id блока */
if ( null != block ) {
var topPos = getTopOffset( block );
window.onscroll = function() {
var newcss = (topPos < window.pageYOffset) ?
'top:20px; position: fixed;' : 'position:static;';
block.setAttribute( 'style', newcss );
}
}
</script>
Code:
<div id="fixblock">
<!-- тут должен быть ваш код рекламы -->
</div>
У себя на 3.8.4 опробовал и вроде работает корректно, хотя авторы пишут, что он может наезжать на подвал и неверно фиксироваться при наличии выше в столбце подгружаемых блоков (типа рекламы или виджетов соцсетей). Автор выкладывал у себя доработки для исправления этих проблем, однако я решил сначала опробовать первоначальный вариант и он у меня работает корректно, хотя виджет соцсети выше тоже есть (пока проверил только на новых браузерах ie 11, хром, лиса).
Я спросить хочу понимающих вебмастеров: можете сказать что то про этот скрипт, какие могут возникнуть проблемы при его использовании? Я в скриптах не понимаю ничего. Керку доверяю полностью (я про использование его скрипта), а тут все таки источник не проверенный.
Особенно нравится последний вариант, но ничего похоже на этот скрипт найти не удалось.
Last edited by inso : 03-30-2015 at 02:10 PM.
Reason: Добавлено сообщение
kerk
k0t
Join Date: May 2005
Location: localhost
Posts: 28,711
Версия vB: 3.8.x
Пол:
Reputation:
Гуру 20257
Репутация в разделе: 8432
1
на ауди клубе работает несколько иначе, чем мой скрипт
там верхняя часть уползает вверх при скроллинге и стопорится в момент когда нижняя часть блока доползла до определенной высоты
у меня же фикстируется почти сразу, как только верхняя часть блока уперлась в верх страницы и "попускает", когда нижняя часть блока уперлась в футер
ну в любом случае
в исохднике код скрипта есть
начиная отсюда
Code:
function getClientHeight()
и далее с комментами в коде
syn
Эксперт
Join Date: Dec 2008
Location: Харьков, Украина
Награды в конкурсах:
Posts: 1,096
Версия vB: 3.8.x
Пол:
Reputation:
Professional 885
Репутация в разделе: 327
1
@inso, Ctrl+U либо Ctrl+Shift+I на любом понравившемся варианте.
@inso
Знаток
Join Date: Sep 2013
Location: middle of nowhere
Награды в конкурсах:
Posts: 916
Версия vB: 3.8.4
Reputation:
Knowing 207
Репутация в разделе: 91
Аллея Звезд
0
Чет у меня ничего не получается со скриптом ауди клуба. Перекинул в футер скрипт, для правой колонки задал как у них
Просто не знаю как еще его задать, чтобы все блоки охватил скрипт. Можете подсказать почему не работает?
syn
Эксперт
Join Date: Dec 2008
Location: Харьков, Украина
Награды в конкурсах:
Posts: 1,096
Версия vB: 3.8.x
Пол:
Reputation:
Professional 885
Репутация в разделе: 327
0
right_column вообще выводится (активен?) на странице, где тебе нужно?
сам скрипт (JS) кинь сюда.
@inso
Знаток
Join Date: Sep 2013
Location: middle of nowhere
Награды в конкурсах:
Posts: 916
Версия vB: 3.8.4
Reputation:
Knowing 207
Репутация в разделе: 91
Аллея Звезд
0
Quote:
Originally Posted by syn
right_column вообще выводится (активен?) на странице, где тебе нужно?
да конечно
Вот скрипт, я его в футер ставлю
Code:
<script type="text/javascript">
function getClientHeight()
{
return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientHeight:document.body.clientHeight;
}
function getBodyScrollLeft()
{
return self.pageXOffset || (document.documentElement && document.documentElement.scrollLeft) || (document.body && document.body.scrollLeft);
}
function getBodyScrollTop()
{
return self.pageYOffset || (document.documentElement && document.documentElement.scrollTop) || (document.body && document.body.scrollTop);
}
function runMultiple()
{
abr = getBodyScrollTop();
var bottompos=0;
if (getOffset(document.getElementById('divhe')).top > RBottom){
RBottom = getOffset(document.getElementById('divhe')).top;
}
divheight = RBottom - RTop;
if (divheight+RTop +100 > getOffset(document.getElementById('bottomstart')).top){
//Если правая колонка сразу упирается в дно, не надо с ней ничего делать.
} else
{
bottompos = getOffset(document.getElementById('bottomstart')).top - abr - divheight -FakeTop;
//document.title = bottompos; //getOffset(document.getElementById('bottomstart')).top - abr - getClientHeight();
if (bottompos>0) {
bottompos=0;
}
if (divheight > getClientHeight()) { //Если высота столбца больше размера экрана
if (abr > RTop + divheight - getClientHeight() ){ //Если смещение дальше чем был верх колонки
RMenu.style.position = "fixed";
RMenu.style.top = getClientHeight()-divheight+bottompos+"px";
FakeTop = getClientHeight()-divheight;
RMenu.style.left = RMenu.style.left = getOffset(document.getElementById('divtop')).left - getBodyScrollLeft() +"px";
//document.title = "1";
} else {
//document.title = "2";
RMenu.style.position = "relative";
RMenu.style.top = "0px";
RMenu.style.left = "0px";}
}
else
{
if (abr > RTop ){
//document.title = "3";
FakeTop = 0;
RMenu.style.position = "fixed";
RMenu.style.top= bottompos+"px";
RMenu.style.left = getOffset(document.getElementById('divtop')).left - getBodyScrollLeft() +"px";
} else {
//document.title = "4";
FakeTop = 0;
RMenu.style.position = "relative";
RMenu.style.top = "0px";
RMenu.style.left = "0px";
}
}
}
}
var agt=navigator.userAgent.toLowerCase();
var is_ie = (agt.indexOf("msie") != -1&&agt.indexOf('opera')==-1);
var is_opera = ((agt.indexOf("opera") != -1)||(window.opera));
if (is_opera) {
var timerMulti = window.setInterval("runMultiple();", 1);
} else
if (screen.width <960) {}
else
{
var timerMulti = window.setInterval("runMultiple();", 1);
}
var RMenu = document.getElementById('rightmenu');
var RTop = getOffset(RMenu).top;
var RBottom = 0;
var FakeTop = 0;
function getOffset(elem) {
if (elem.getBoundingClientRect) {
// "правильный" вариант
return getOffsetRect(elem)
} else {
// пусть работает хоть как-то
return getOffsetSum(elem)
}
}
function getOffsetSum(elem) {
var top=0, left=0
while(elem) {
top = top + parseInt(elem.offsetTop)
left = left + parseInt(elem.offsetLeft)
elem = elem.offsetParent
}
return {top: top, left: left}
}
function getOffsetRect(elem) {
// (1)
var box = elem.getBoundingClientRect()
// (2)
var body = document.body
var docElem = document.documentElement
// (3)
var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft
// (4)
var clientTop = docElem.clientTop || body.clientTop || 0
var clientLeft = docElem.clientLeft || body.clientLeft || 0
// (5)
var top = box.top + scrollTop - clientTop
var left = box.left + scrollLeft - clientLeft
return { top: Math.round(top), left: Math.round(left) }
}
</script>
syn
Эксперт
Join Date: Dec 2008
Location: Харьков, Украина
Награды в конкурсах:
Posts: 1,096
Версия vB: 3.8.x
Пол:
Reputation:
Professional 885
Репутация в разделе: 327
1
<span id="divhe">?
<span id="bottomstart">?
имхо: скрипт не оптимален для вашей задачи.
поищите попроще (лучше на профильных ресурсах: хабр, javascript.ru, cyberforum.ru)
@inso
Знаток
Join Date: Sep 2013
Location: middle of nowhere
Награды в конкурсах:
Posts: 916
Версия vB: 3.8.4
Reputation:
Knowing 207
Репутация в разделе: 91
Аллея Звезд
0
Quote:
Originally Posted by syn
<span id="divhe">?
<span id="bottomstart">?
а что это? Гугл ничего не находит.
Вообще я думаю реализация как на ауди мне бы подошла, потому что дизайн у нас похожий и тоже 3.8.х
С другой стороны перепробовал разные варианты и без колонки все равно лучше, чем с ней. Жаль от нее отказываться, она бы повысила переходы по сайту и клики по рекламе. Займусь пока чем нибудь другим, планов и идей кроме нее еще много всяких, потом вернусь к ее реализации.
Скрипт фиксации блока на странице при скроллинге
