Как создать фиксированный модуль?

Как создать фиксированный модуль?

 
Посетитель
small user social cms
Сообщений: 95
Как создать фиксированный модуль, который фиксируется от определенной точки прокрутки и до футера ?
Вопрос для первой ветки.
Редактировалось: 1 раз (Последний: 7 апреля 2016 в 14:39)
Я продвигаю сайты с помощью этого сервиса : http://1ps.ru/?p=616517
Посетитель
no avatar
Сообщений: 51
Код PHP:
  1.  
  2. $(document).ready(function(){
  3. var f_cont = $('nav');
  4. var def_top = f_cont.offset().top;
  5. var def_left = f_cont.offset().left;
  6. var pos = 'static';
  7.  
  8. $(window).scroll(function(){
  9. if ($(window).scrollTop() > def_top){
  10. if (pos == 'static'){
  11. f_cont.css({'position': 'fixed', 'left': def_left, 'top': 0, 'z-index': 9999});
  12. pos = 'fixed';
  13. }
  14. }else{
  15. if (pos == 'fixed'){
  16. f_cont.css({'position': '', 'left': '', 'top': '', 'z-index': ''});
  17. pos = 'static';
  18. }
  19. }
  20. });
  21. });
  22.  
  23.  
не знаю, я вижу это так, $('nav') в ковычках ставите идентификатор блока который надо фиксировать и все, при прокрутке он будет фиксироватьс когда страница дойдет до него
Web-студия Glitch Art - создание сайтов и дополнений. Дизайн сайтов
Реклама
cms
Посетитель
small user social cms
Сообщений: 95
AbdullaAlt:

Код PHP:
  1.  
  2. $(document).ready(function(){
  3. var f_cont = $('nav');
  4. var def_top = f_cont.offset().top;
  5. var def_left = f_cont.offset().left;
  6. var pos = 'static';
  7.  
  8. $(window).scroll(function(){
  9. if ($(window).scrollTop() > def_top){
  10. if (pos == 'static'){
  11. f_cont.css({'position': 'fixed', 'left': def_left, 'top': 0, 'z-index': 9999});
  12. pos = 'fixed';
  13. }
  14. }else{
  15. if (pos == 'fixed'){
  16. f_cont.css({'position': '', 'left': '', 'top': '', 'z-index': ''});
  17. pos = 'static';
  18. }
  19. }
  20. });
  21. });
  22.  
  23.  
не знаю, я вижу это так, $('nav') в ковычках ставите идентификатор блока который надо фиксировать и все, при прокрутке он будет фиксироватьс когда страница дойдет до него

А сам этот код куда нужно ставить?
Я продвигаю сайты с помощью этого сервиса : http://1ps.ru/?p=616517
Посетитель
small user social cms
Медаль
Сообщений: 657
в этом шаблоне http://first.instantcmsv1.ru/
сделано вот так

сначала
Код PHP:
  1.  
  2. <div class="sticky-block">
  3. сюда позиция для модуля, или баннер
  4. </div>
  5.  
а в конце страницы
Код PHP:
  1.  
  2. <script>
  3. (function(){
  4. var a = document.querySelector('.sticky-block'), b = null, P = 0; // если ноль заменить на число, то блок будет прилипать до того, как верхний край окна браузера дойдёт до верхнего края элемента. Может быть отрицательным числом
  5. window.addEventListener('scroll', Ascroll, false);
  6. document.body.addEventListener('scroll', Ascroll, false);
  7. function Ascroll() {
  8. if (b == null) {
  9. var Sa = getComputedStyle(a, ''), s = '';
  10. for (var i = 0; i < Sa.length; i++) {
  11. if (Sa[i].indexOf('overflow') == 0 || Sa[i].indexOf('padding') == 0 || Sa[i].indexOf('border') == 0 || Sa[i].indexOf('outline') == 0 || Sa[i].indexOf('box-shadow') == 0 || Sa[i].indexOf('background') == 0) {
  12. s += Sa[i] + ': ' +Sa.getPropertyValue(Sa[i]) + '; '
  13. }
  14. }
  15. b = document.createElement('div');
  16. b.style.cssText = s + ' box-sizing: border-box; width: ' + a.offsetWidth + 'px;';
  17. a.insertBefore(b, a.firstChild);
  18. var l = a.childNodes.length;
  19. for (var i = 1; i < l; i++) {
  20. b.appendChild(a.childNodes[1]);
  21. }
  22. a.style.height = b.getBoundingClientRect().height + 'px';
  23. a.style.padding = '0';
  24. a.style.border = '0';
  25. }
  26. var Ra = a.getBoundingClientRect(),
  27. R = Math.round(Ra.top + b.getBoundingClientRect().height - document.querySelector('.footer-wrapper).getBoundingClientRect().top + 0); // footer-wrapper - это название класса блока, в который упрётся плавающий блок при прокрутке, измените его на своё; если ноль заменить на число, то блок будет прилипать до того, как нижний край элемента дойдёт до футера
  28. if ((Ra.top - P) <= 0) {
  29. if ((Ra.top - P) <= R) {
  30. b.className = 'stop';
  31. b.style.top = - R +'px';
  32. } else {
  33. b.className = 'sticky';
  34. b.style.top = P + 'px';
  35. }
  36. } else {
  37. b.className = '';
  38. b.style.top = '';
  39. }
  40. window.addEventListener('resize', function() {
  41. a.children[0].style.width = getComputedStyle(a, '').width
  42. }, false);
  43. }
  44. })()
  45. </script>
  46.  
Редактировалось: 4 раз (Последний: 7 апреля 2016 в 22:44)
шаблоны и модули для instantCMS 1.10.6
Посетитель
small user social cms
Сообщений: 95
tokarev:

в этом шаблоне http://first.instantcmsv1.ru/
сделано вот так

сначала
Код PHP:
  1.  
  2.  
  3. сюда позиция для модуля, или баннер
  4.  
  5.  
а в конце страницы
Код PHP:
  1.  
  2.  
  3. (function(){
  4. var a = document.querySelector('.sticky-block'), b = null, P = 0; // если ноль заменить на число, то блок будет прилипать до того, как верхний край окна браузера дойдёт до верхнего края элемента. Может быть отрицательным числом
  5. window.addEventListener('scroll', Ascroll, false);
  6. document.body.addEventListener('scroll', Ascroll, false);
  7. function Ascroll() {
  8. if (b == null) {
  9. var Sa = getComputedStyle(a, ''), s = '';
  10. for (var i = 0; i < Sa.length; i++) {
  11. if (Sa[i].indexOf('overflow') == 0 || Sa[i].indexOf('padding') == 0 || Sa[i].indexOf('border') == 0 || Sa[i].indexOf('outline') == 0 || Sa[i].indexOf('box-shadow') == 0 || Sa[i].indexOf('background') == 0) {
  12. s += Sa[i] + ': ' +Sa.getPropertyValue(Sa[i]) + '; '
  13. }
  14. }
  15. b = document.createElement('div');
  16. b.style.cssText = s + ' box-sizing: border-box; width: ' + a.offsetWidth + 'px;';
  17. a.insertBefore(b, a.firstChild);
  18. var l = a.childNodes.length;
  19. for (var i = 1; i < l; i++) {
  20. b.appendChild(a.childNodes[1]);
  21. }
  22. a.style.height = b.getBoundingClientRect().height + 'px';
  23. a.style.padding = '0';
  24. a.style.border = '0';
  25. }
  26. var Ra = a.getBoundingClientRect(),
  27. R = Math.round(Ra.top + b.getBoundingClientRect().height - document.querySelector('.footer-wrapper).getBoundingClientRect().top + 0); // footer-wrapper - это название класса блока, в который упрётся плавающий блок при прокрутке, измените его на своё; если ноль заменить на число, то блок будет прилипать до того, как нижний край элемента дойдёт до футера
  28. if ((Ra.top - P)
  29.  

А в каком файле сам код то разместить?
Я продвигаю сайты с помощью этого сервиса : http://1ps.ru/?p=616517
Посетитель
no avatar
Сообщений: 11
SHDF:
А в каком файле сам код то разместить?

В файле шаблона template.php
Посетитель
small user social cms
Сообщений: 95
tokarev:

в этом шаблоне http://first.instantcmsv1.ru/
сделано вот так

сначала
Код PHP:
  1.  
  2.  
  3. сюда позиция для модуля, или баннер
  4.  
  5.  
а в конце страницы
Код PHP:
  1.  
  2.  
  3. (function(){
  4. var a = document.querySelector('.sticky-block'), b = null, P = 0; // если ноль заменить на число, то блок будет прилипать до того, как верхний край окна браузера дойдёт до верхнего края элемента. Может быть отрицательным числом
  5. window.addEventListener('scroll', Ascroll, false);
  6. document.body.addEventListener('scroll', Ascroll, false);
  7. function Ascroll() {
  8. if (b == null) {
  9. var Sa = getComputedStyle(a, ''), s = '';
  10. for (var i = 0; i < Sa.length; i++) {
  11. if (Sa[i].indexOf('overflow') == 0 || Sa[i].indexOf('padding') == 0 || Sa[i].indexOf('border') == 0 || Sa[i].indexOf('outline') == 0 || Sa[i].indexOf('box-shadow') == 0 || Sa[i].indexOf('background') == 0) {
  12. s += Sa[i] + ': ' +Sa.getPropertyValue(Sa[i]) + '; '
  13. }
  14. }
  15. b = document.createElement('div');
  16. b.style.cssText = s + ' box-sizing: border-box; width: ' + a.offsetWidth + 'px;';
  17. a.insertBefore(b, a.firstChild);
  18. var l = a.childNodes.length;
  19. for (var i = 1; i < l; i++) {
  20. b.appendChild(a.childNodes[1]);
  21. }
  22. a.style.height = b.getBoundingClientRect().height + 'px';
  23. a.style.padding = '0';
  24. a.style.border = '0';
  25. }
  26. var Ra = a.getBoundingClientRect(),
  27. R = Math.round(Ra.top + b.getBoundingClientRect().height - document.querySelector('.footer-wrapper).getBoundingClientRect().top + 0); // footer-wrapper - это название класса блока, в который упрётся плавающий блок при прокрутке, измените его на своё; если ноль заменить на число, то блок будет прилипать до того, как нижний край элемента дойдёт до футера
  28. if ((Ra.top - P)
  29.  

Спасибо.
Я продвигаю сайты с помощью этого сервиса : http://1ps.ru/?p=616517
В начало страницы
Предыдущая темаСледующая тема Перейти на форум: