Новости Joomla

0 Пользователей и 1 Гость просматривают эту тему.
  • 5 Ответов
  • 3170 Просмотров
*

Neviqimka

  • Осваиваюсь на форуме
  • 30
  • 0 / 0
Как сделать так чтобы фиксированный блок двигался вместе с экраном, а не с прокруткой? То есть есть некий блок со CSS свойством "position:fixed" и он двигается параллельно с вертикальной прокруткой, а нужно сделать так чтобы он начинал свое движение только после того как верхняя часть экрана подходило к блоку.
« Последнее редактирование: 13.07.2014, 20:19:58 от Neviqimka »
*

Grigory S.

  • Давно я тут
  • 658
  • 70 / 0
  • (с)
Попробуй задать ему например
Код: css
top: 300px;
Не задав правильный вопрос, невозможно получить правильный ответ.
Для "спасибок" существует кнопочка "+".
*

Neviqimka

  • Осваиваюсь на форуме
  • 30
  • 0 / 0
не не помогает, ведать без дополнительных скриптов здесь не обойтись

*

AlekVolsk

  • Гуру
  • 6913
  • 416 / 4
Код: javascript
jQuery(document).ready(function(){

  /* функция кроссбраузерного определения отступа от верха документа к текущей позиции скроллера прокрутки */
  function getScrollTop() {
    var scrOfY = 0;
    if (typeof(window.pageYOffset) == "number") {scrOfY = window.pageYOffset;}
    else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {scrOfY = document.body.scrollTop;}
    else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {scrOfY = document.documentElement.scrollTop;}
    return scrOfY;
  }

  /* пересчитываем отступ при прокрутке экрана */
  jQuery(window).scroll(function() {
    var block = "#block"; // задаем элемент, который будет плавать
    var top = 300; // отступ плавающего блока от верхнего края сайта(!)
    var mintop = 20; // минимальный отступ блока от края экрана, при котором он начинает "плавать"
    if (jQuery(block).length) {
      var a = getScrollTop();
      if (a < (top-mintop)) {
        jQuery(block).css("margin-top",a-(top-mintop)+"px");
      } else {
        jQuery(block).css("margin-top",mintop+"px");
      }
    }
  });
  
});
Параметры block, top и mintop задайте какие надобно, скрипт подключите в head или напрямую кодом или отдельным файлом. Это рабочий пример.
*

lesh1j

  • Захожу иногда
  • 257
  • 35 / 0
Код: javascript
<script type="text/javascript">
window.onscroll = function(){
if(document.documentElement.scrollTop >= 100){ //устанавливаем при прокрутке на сколько пикселей - фиксировать блок
document.getElementById('IDнужногоБлока').style.position = 'fixed';
document.getElementById('IDнужногоБлока').style.top = '0px'; //отступ сверху
}
else{
document.getElementById('IDнужногоБлока').style.position = 'relative';
}
}
</script>
*

bybus

  • Захожу иногда
  • 86
  • 2 / 1
Подскажите почему в мобильных браузерах и в старой опере(12.17) происходит скачок блока с поиском и корзиной, когда прокручиваешь страницу наверх?
Хотелось бы что бы блок становился фиксированным при прокрутке страницы до его верхней границы.
Код такой:
Код
function fixsearch()
{
var top = jQuery('#yt_spotlight').offset().top - parseFloat(jQuery('#yt_spotlight').css('marginTop').replace(/auto/, 0));
var hfp = jQuery('#yt_spotlight').outerHeight();
var pust = 0;
  jQuery(window).scroll(function (event) {
    var y = jQuery(this).scrollTop();
    if (y >= top) {
      jQuery('#yt_spotlight').addClass('fixedsearch');
      if (pust == 0) {
      jQuery('<div class="pustishka"></div>').insertBefore('#yt_spotlight').height(hfp);
      pust = 1;}
    } else {
      jQuery('#yt_spotlight').removeClass('fixedsearch');
      jQuery( ".pustishka" ).remove();
      pust = 0;
    }
  });
}
Код
.fixedsearch {
         position: fixed !important;
         width: 100%;
         top: 0;
}
.pustishka{
background-color:#f1f1f1;
position:relative;
}
посмотреть можно тут zainskavto.ru
« Последнее редактирование: 04.11.2014, 21:09:45 от bybus »
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Дублирование блока при переключение на английский модулем GTranslate

Автор kostey

Ответов: 1
Просмотров: 1217
Последний ответ 07.12.2018, 14:18:17
от kostey
Высота блока с иконками

Автор dmtn

Ответов: 10
Просмотров: 1603
Последний ответ 03.02.2018, 19:54:11
от dmtn
Зафиксировать два блока средствами Joomla

Автор geg

Ответов: 0
Просмотров: 1038
Последний ответ 29.09.2017, 15:42:55
от geg
Стиль для вышестоящего блока - HTML, CSS

Автор lalalag

Ответов: 6
Просмотров: 2655
Последний ответ 26.06.2017, 15:07:35
от Shustry
Настройка рекламного блока для мобильных

Автор Lovenokia

Ответов: 1
Просмотров: 1516
Последний ответ 26.04.2017, 00:37:31
от darkghost